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
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
Both options work by copying the contents of the
attribute from the tag links, and using it as the tooltip text. The
native option works by changing the
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 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
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.
puts it in the right place.
div tooltip has one more option,
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
<em> emphasised style:
... <a href="/tags/ocelot" title="What is an <em>ocelot</em> anyway?">Ocelot</a> ...
You should encode "
<" and "
<" and "
>", 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.