xslttooltipjquery-tooltip

How can i show a table in a tooltip:XSL

I have a the below tags in xml file:

<more_details>
    <source>192.168.1.1</source>
    <destination>10.10.10.10</destination>
    <vlan>192.168.0.0/24</vlan>
    <date>29/3/1391</date>
    <count>24</count>
</more_details>

I want to design a table in tooltip using xsl;(I want when the mouse goes over a particular link in the page, it represents the data in a table. data comes from the xml file)

I write the below lines in my xsl file to achive this goal:

<a href="">
    <xsl:attribute name="title"><table style='color:#efefef; background:none !important;'>
    <tr>
        <td><xsl:value-of select="source"/></xsl:value-of><td>
        <td><xsl:value-of select="destination"/></xsl:value-of></td>
        <td><xsl:value-of select="vlan"/></xsl:value-of></td>
        <td><xsl:value-of select="date"/></xsl:value-of></td>
        <td><xsl:value-of select="count"/></xsl:value-of></td>
    </tr>
    </table></xsl:attribute>
    more details
</a>

It works in an html file but not in an xsl file; XSL deletes all html tags automatically.

like this:

<a href="" title="192.168.2.1125.45.24.5192.168.0.0/2429/2/1390 - 12:1424">
  link
</a>

It means that when the mouse goes over the "more details" word, the result shown in the tooltip is:

192.168.2.1125.45.24.5192.168.0.0/2429/2/1390 - 12:1424

I want to show each of the above tags in one column of a table. (to be structured) but when i run the program, it shows data not in structured format(not in the table)

I also examin the second way:

<a href="">
  <xsl:attribute name="title">&lt;table style='color:#efefef; background:none !important;'>
    <tr>
      <td><xsl:value-of select="source"/>&lt;/td>
      <td><xsl:value-of select="destination"/>&lt;/td>
      <td><xsl:value-of select="vlan"/>&lt;/td>
      <td><xsl:value-of select="date"/>&lt;/td>
      <td><xsl:value-of select="count"/>&lt;/td>
    </tr>
  </table></xsl:attribute>
    more details
</a>

and it also doesn't work. the result of this second way is:

I really need your help and any answer will be really appreciated. thanx alot

Solution

  • You cannot have a table in an HTML title attribute. It is not possible, stop trying.

    What you can do:

    1. Use one of the JavaScript libraries available to generate custom tool-tips. jQuery has plugins for that, for example, but there are many others. These libraries can display any kind of HTML on mouse-over, so tables would not be a problem.
    2. Simply add line-breaks to your attribute. Most browsers support line-breaks in the title attributes and display them on screen. Not as pretty as a table, but might be enough.

    I will only go into detail for the second option. The first is out of scope for this question.

    <a href="">
  <xsl:attribute name="title">
     <xsl:value-of select="concat('Source: ', source, '&#10;')" />
     <xsl:value-of select="concat('Destination: ', destination, '&#10;')" />
     <xsl:value-of select="concat('VLAN: ', source, '&#10;')" />
     <xsl:value-of select="concat('Date: ', date, '&#10;')" />
     <xsl:value-of select="concat('Count: ', count)" />
  </xsl:attribute>
  <xsl:text>more details</xsl:text>
</a>