SVG Title (tooltip)

Most HTML elements support the title attribute. When you move the mouse pointer over that element, a little tooltip is shown for a certain amount of time or until you leave that element. The SVG spec defines a title element (Chap. 5.4) instead. The SVG spec leaves it to the implementer of the SVG processor how to deal with that title element. Possible is

I implemented a simple, spec-conform way (using an ECMAScript object) to show title elements as tooltips.

svg tooltip

Try it.

Here is how you have to prepare your svg code for supporting title tooltips. 
<?xml version="1.0"?> 
<svg width="300" height="250" onload="LoadHandler(evt)">
   <title>tooltips example</title>
   <rect style="fill:blue;stroke:black;" x="100" y="50" width="25" height="150">
      <title>skiing</title>
   </rect>
   <rect style="fill:red;stroke:black;" x="150" y="80" width="25" height="120">
      <title>snowboarding</title>
   </rect>
   <rect style="fill:yellow;stroke:black;" x="200" y="10" width="25" height="190">
      <title>sunbathing</title>
   </rect>
   <g>
      <title>winter sports chart</title>
      <line style="stroke:black; stroke-width:2;" x1="50" y1="220" x2="250" y2="220" />
      <line style="stroke:black; stroke-width:2;" x1="50" y1="220" x2="50" y2="20" />
   </g>

   <script xlink:href="../script/Title.js" />
   <script><![CDATA[
      function LoadHandler(event) 
      {
         new Title(event.getTarget().getOwnerDocument(), 12);
      }
   ]]></script>
</svg>

You have to do only minor additions

  1. add the title elements to your svg code (that is, what you would do anyway).
  2. include the ECMAScript source code via <script xlink:href="Title.js" /> into the svg file.
  3. invoke the constructor of the Title class from your onload event handler function. Use
    new Title(document, fontSize);

If you want to try it out, you can download Title.js here.

The Title object works as follows:

  1. dynamically create a single new <g> element with a <rect> and a <text> element as its childs and append it at the end of the document element. 
      <g transform="translate(0,0)" visibility="hidden">
    <rect y="-10.8" x="-3" width="1" height="15" style="stroke:black;fill:#edefc2;stroke-width:1"/>
    <text style="font-family:Arial; font-size:12;fill:black;"> </text>
  </g>
  2. find all elements with a <title> child element and add a DOM2 mouseover eventlistener to them. A class method (Titel.Activate) of the Title prototype object is used as the eventlistener function.
  3. add a zoom eventlistener to the documentElement, to ensure invariant size of the tooltips while zooming.
  4. when the mouse pointer moves over a svg element, its mouseover eventlisteners are invoked (Titel.Activate among them) and the tooltip group
    1. is translated to the mouse pointers coordinate
    2. changes its tooltip text corresponding to the <title> element's text
    3. changes the rectangle's width to fit the text

There are also some shortcomings:

  1. dynamically generated elements with a <title> child element are not automatically tooltip-enabled. You have to register them explicitly via Titel.Register as an event target.
  2. the tooltip may be positioned partially (sometimes completely) outside of the visible viewport (maybe someone wants to add more intelligence here).

© 2001 MecXpert