How to Use the Dojo Tooltip Widget - Creating a tooltip for objects
(Page 3 of 7 )
Using tag attributes
You can easily create a tooltip using tags as shown in the following code for a button:
<HTML>
<HEAD>
<TITLE> </TITLE>
<script type="text/javascript">
var djConfig = {isDebug: true, debugAtAllCosts: false };
</script>
<script type="text/javascript"
src="http://images.devshed.com/da/stories/
http://localhost/DoAjax/dojo.js">
</script>
<script type="text/javascript">
dojo.require("dojo.widget.Tooltip");
</script>
</HEAD>
<BODY> <!--Button-->
<!--This places a button-->
<button id="myButton">DoJo Button</button>
<!--This adds a tooltip control-->
<!--The connectId property adds this control
referencing the "myButton" id-->
<!--The caption is what gets displayed in the pop-up window
of the tooltip--> <span dojoType="tooltip"
connectId="myButton"
caption="tooltip on button">
</span>
<!--end button-->
</BODY>
</HTML>
The rendered button shows the tooltip as in the next picture from IE 7.0. It is practically the same in FireFix2.0 and Opera 9.0. As you can see, it is a true cross browser functionality.
In the following sections some of the code in the previous listing will not be repeated and the reader may cut and paste the code fragments between the <!--Button --> ....paste code here... <!--end button --> lines appropriately.
Next: Getting some color into the tooltip >>
More JavaScript Articles
More By Jayaram Krishnaswamy
