How to Use the Dojo Tooltip Widget - How about an image in the tooltip?

(Page 5 of 7 )

It's really cool. You can pop up boxes showing images with some text if you need to with the following code. Here is a snippet to display images that can be used for associating pictures with text. Again between the <!--button-->....<--end button--> HTML section plug in the following code. The images are animated gif files and keep the reader interest high. Notice the attribute/value pair toggle="explode" which pops open explosively. The various picture files are using the URL reference.

<!--Button-->
<table width="25%" border="1">
<tr><td>
<ul>
<li id="fish">Jelly Fish</li>
<li id="mammal">Elephant  </li>
<li id="bird">Bird </li>
</ul>
</td></tr></table>
<span dojoType="tooltip" connectId="fish" toggle="explode"> 

<img src="http://images.devshed.com/da/stories/

http://localhost/DojoAjax/JellyFish.gif"></img><br/>
Watch out could be poisonous </span>
<span dojoType="tooltip" connectId="mammal" toggle="explode">
<img src="http://images.devshed.com/da/stories/

http://localhost/DojoAjax/Elephant.gif"></img><br/>
Largest Land Animal
</span>
<span dojoType="tooltip" connectId="bird" toggle="explode">
<img src="http://images.devshed.com/da/stories/

http://localhost/DojoAjax/Bird.gif"></img><br/>
Free in the skies
</span>
<!--end button-->

Well the list element was confined within the borders of the table, otherwise the tooltip could pop up way beyond to a considerable extent as shown along the line in the next picture. Here is the display shown in Opera 9.0. Pay no heed to the messages from the Debug. These do not appear in the other browsers.

A tooltip which fades out

Here is a snippet for a button which will fade out. Just add the toggle attribute value (="fade") and the object fades as it gets rendered. The title attribute is added to bring out the differences between the tooltip that appears with the title attribute and the dojoTooltip. In fact both of the tooltips appear on the display as shown. The tooltip from the title is instantaneous while the one from dojo fades slowly, which can be controlled by changing the toggleDuration.

<input type="button" id="btn" 
title="This is a button" 
value="eh!"/>
<span dojoType="tooltip" 
connectId="btn" 
caption="This should fade!" toggle="fade" 

toggleDuration="600">
</span>

The next picture shows how it gets rendered.

Next: The default style of dojoType tooltip >>
 

More JavaScript Articles
More By Jayaram Krishnaswamy

Comments On: On Using the Dojo Tooltip Widget

· That is correct. No more drab looking tooltip. You can put anything you want,...    · Thanx for writing this, I really needed an explanation of how to use it. But...   >>> Post your comment now!