Yui.Net: The Tooltip

As part of my ongoing series covering the Yui.Net library (an asp.net wrapper for the Yahoo User Interface Library), today I will cover a fairly simple but useful component - the ToolTip. This component is exactly what you would expect it to be - a ToolTip which you can associate with any element on the page. The nice thing about the YUI ToolTip is that it can contain html code, can be styled via css and it can have animations applied to it.

Lets start with a simple example - a div with a basic tool tip. As with all Yui.Net controls, you must first include the YahooScriptManager on your page:

<yui:YahooScriptManager ID="manager" runat="server" />

Next, we'll just place a simple div:

<div id="content">Just a simple div</div>

then we can place our ToolTip control on the page:

<yui:Tooltip ID="toolTip" runat="server" 
     ContextID="content" Text="This is a simple tooltip!" />

this will cause a simle tooltip popup when you place your mouse over the div. Lets take a look at the code that is generated by these controls. First, there are the necessary script tags managed by the YahooScriptManager:

<script src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js" 
        type="text/javascript"></script>

then there is the javascript initialization of the tooltip object:

var toolTip = new  YAHOO.widget.Tooltip("toolTip", { 
    visible: false, constraintoviewport: true, iframe : false, 
    context: "content", text: "This is a simple tooltip!"} );

That is all that is really needed for a basic tooltip. Now, lets add a fade animation so that the ToolTip will fade in an out nicely:

<yui:Tooltip ID="toolTip" runat="server" ContextID="content" Text="This is a simple tooltip!">
    <Animations>
        <yui:Animation Type="Fade" Duration="3" />
    </Animations>
</yui:Tooltip>

This will cause an extra script reference to be generated by the YahooScriptManager:

<script src="http://yui.yahooapis.com/2.2.2/build/animation/animation-min.js" 
        type="text/javascript"></script>

Whenever possible the YahooScriptManager will only include the references needed for the needed functionality so the animation library is only included if a control on the current page will need animation. Actually, it is not the YahooScriptManager that makes this decision but it is the controls themselves. Now the generated javascript looks like:

var toolTip = new  YAHOO.widget.Tooltip("toolTip", 
    { visible: false, effect: 
    {effect:YAHOO.widget.ContainerEffect.FADE,duration:0.3}, 
    constraintoviewport: true, iframe : false, context: "content", 
    text: "This is a simple tooltip!"} );

That is about all you really need to know about the ToolTip control to get started. Pretty standard really. Next up I will cover the FloatPanel control and some new features I am building into the YUI.Net library for dealing with javascript events.