TagCanvas 1.14

Published

This version adds support for assigning tooltips to the tags in the cloud. Tooltips are turned off by default, so the tooltip option is there to turn it on and specify the method to use. The option supports three values: null being the default with no tooltips, native to use tooltips provided by the operating system and div to use a custom div element that can then be styled using CSS.

Both options work by copying the contents of the title attribute from the tag links, and using it as the tooltip text. The native option works by changing the title attribute of the canvas when the mouse enters or leaves a tag. This works quite well in most browsers, though it doesn't work at all in Opera and only works when the mouse first enters the canvas in FireFox. Which is why I also added the div method.

The div method inserts a hidden div element at the end of the body (one for each tag cloud on the page) which is then moved and made visible when the mouse hovers over a tag. By default, the div will have a class of tctooltip, though you can set the class name to be used with the tooltipClass option. The tooltip div uses absolute positioning, and is given a z-index that will put it above the canvas. Styling the appearance of the div is left to CSS - the Javascript code just puts it in the right place.

The div tooltip has one more option, tooltipDelay, which specifies how long the mouse should be stationary on a tag before the tooltip appears. The default value is 300 milliseconds, though you can reduce this to 0 if you want the tooltips to appear instantly. I've set it to 100 for the example cloud above.

Finally, as the div tooltip is an HTML element instead of a simple operating system tooltip, you can include your own HTML inside the tooltip. Here's an example of a tag that will display the word "ocelot" using the <em> emphasised style:

...
<a href="/tags/ocelot" title="What is an &lt;em&gt;ocelot&lt;/em&gt; anyway?">Ocelot</a>
...

You should encode "<" and ">" as "&lt;" and "&gt;", as shown in the example.

Version 1.14 also fixes a bug where clouds with both text and images would position the images incorrectly in Internet Explorer 8. The updated files are available from the TagCanvas page.

« Previous: SVGGraph 2.5.1 Next: SVGGraph 2.6 »

This site uses cookies - details here.