JAVASCRIPT

How to Use the Dojo Tooltip Widget

Windows uses tooltips; they're also commonly found on web pages. This article shows you how to use dojo to render tooltips with some very useful and unusual effects.

Author Info:

By: Jayaram Krishnaswamy

Poor Best

Rating:

/ 16

January 23, 2007

TABLE OF CONTENTS:

Perhaps what you saw in the previous example is similar to what can be achieved by HTML's title attribute. But this is not all. Dojo can do a lot more. This next snippet can pop open a whole HTMLl file by using the dojoTooltip's other attributes. The dojoType tooltip gets connected to the object through its id property as in the previous example.

<!--Button-->
<input type=text id="myBox" value="This box">
<span dojoType="tooltip" 
connectId="myBox" 

href="http://localhost/DojoAjax/tooldoc2.htm"  

executeScripts="true" </span>
<!--end button-->

Just plug in the previous snippet between the comment that reads . When you open the page in browser you will see the following display.

Of course you need to have this tooldoc2.htm in the root directory whose source code is shown here. While both HTML attributes as well as inline CSS work, linked style does not get rendered.

<HTML> 
<HEAD> 
<TITLE>Tooldoc2 htm file </TITLE>
</HEAD> 
<BODY> 
<h2 style="color:magenta;
font-weight:bold; 
background-color:yellow;
width:80px;">Test</h2>
<h3><font color="blue">Test again</font></h3>