How to Use the Dojo Tooltip Widget - The default style of dojoType tooltip

(Page 6 of 7 )

As mentioned earlier, this is found in the CSS style document in the templates directory, which can be modified as well.

.dojoTooltip {
border: solid black 1px;
background: beige;
color: black;
position: absolute;
font-size: small;
padding: 2px 2px 2px 2px;
z-index: 10;
display: block;
}

Sliding show

Well this is not a slide show, but a sliding show. This is created with a number of full-sized and thumbnail-sized images with an HTML marquee. Just plug the code into the first listing and you should be able to see the thumbnails marching from right to left and when you hover over one of them, you pop up a full-sized image contained in the <span/> elements..

<!--Button-->
<marquee direction="right" 
width="75%" 
scrolldelay="1" 
scrollamount="5"> <img id="34"src="http://images.devshed.com/

da/stories/../DojoAjax/tn34.JPG">  <img id="35" 

src="http://images.devshed.com/da/stories/../DojoAjax/tn35.JPG">
<img id="46" src="http://images.devshed.com/da/stories/

../DojoAjax/tn46.JPG">
<img id="66" src="http://images.devshed.com/da/stories/

../DojoAjax/tn66.JPG">   
<img id="87" src="http://images.devshed.com/da/stories/

../DojoAjax/tn87.JPG">      
</marquee> 
<span dojoType="tooltip" connectId="34" 
toggle="explode"> 

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

http://localhost/DojoAjax/Photo34.jpg"> </img><br/>
Piazza Navona in Rome
</span>
<span dojoType="tooltip" connectId="35" 
toggle="explode">
<img src="http://images.devshed.com/da/stories/

http://localhost/DojoAjax/Photo35.jpg">
</img><br/>
Bernini's fountain
</span>
<span dojoType="tooltip" connectId="46" 
toggle="explode">
<img src="http://images.devshed.com/da/stories/

http://localhost/DojoAjax/Photo46.jpg">
</img><br/>
The Pantheon
</span>
<span dojoType="tooltip" connectId="66" 
toggle="explode">
<img src="http://images.devshed.com/da/stories/

http://localhost/DojoAjax/Photo66.jpg">
</img><br/>
Trevi Fountain in Rome
</span>
<span dojoType="tooltip" connectId="87" 
toggle="explode">
<img src="http://images.devshed.com/da/stories/

http://localhost/DojoAjax/Photo87.jpg">
</img><br/>
A Vatican Museum piece
</span>
<!--end button-->

When you point at a thumbnail with the mouse, the full-sized image pops out as shown.

Next: Creating a tooltip dynamically >>
 

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!