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 <em>ocelot</em> anyway?">Ocelot</a> ...
You should encode "<" and ">" as
"<" 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.