[CLOSED] Tooltips?

[haltenberg]

Is there any way for ext:Buttons to have tooltips?
Thanks!

[geoffrey.mcgill]

Hi haltenberg,

At the moment there's no Tooltip functionality built into the Toolkit controls, although you can easily apply a ToolTip with a bit of custom JavaScript.

The following demonstrates how to add a ToolTip to an <ext:Button> control.

Example

<ext:ScriptManager ID="ScriptManager1" runat="server">
    <Listeners>
        <DocumentReady Handler="
            this.tt = new Ext.ToolTip({
                target: '{Button1}',
                title: 'Please click this button'
            });" />
    </Listeners>
</ext:ScriptManager>
<ext:Button ID="Button1" runat="server" Text="Submit" />

In the sample above, I wrap the "Button1" ID in curly braces {} which creates a ID token/template. The token is then converted to the client-side ID (.ClientID) of the control when rendered. The client-side ID may be different than the server-side ID.

The ToolTip documentation lists all the properties available, see http://www.extjs.com/deploy/dev/docs/?class=Ext.ToolTip

Hope this helps.

[haltenberg]

Thank you, Geoffrey! As always, you are the best!

Is there any way to attach the tooltip to the button during button declaration? Modifying ScriptManager tag is not always an option... What if I need to attach tooltips to buttons in the user control (ascx)? There is no ScriptManagerProxy in Coolite like in Ajax.Net?

Thank you!

[geoffrey.mcgill]

Hi haltenberg,

I just finished up adding markup support for <ext:ToolTip>. It's actually pretty cool stuff.

The following sample demonstrates adding a <ext:ToolTip> to an <ext:Button>. Multiple ToolTips are possible, although generally you'll only be adding one.

Example

<ext:Button ID="Button1" runat="server" Text="Submit">
    <ToolTips>
        <ext:ToolTip ID="ToolTip1" runat="server" Title="ToolTip added to the Button..." />
    </ToolTips>
</ext:Button>

The following sample demonstrates adding a more complex ToolTip which also listens for the ToolTip Show and Hide events. By default the ToolTip does not follow the mouse movements, but setting the .TrackMouse property to "true" enables mouse movement tracking. The <Show> and <Hide> Listeners in this example just log a message to the FireBug (FireFox plugin) console.

Example

<ext:Button ID="Button2" runat="server" Text="Submit">
    <ToolTips>
        <ext:ToolTip
            ID="ToolTip2"
            runat="server"
            Title="More complex ToolTip..."
            TrackMouse="true"
            HideDelay="1000">
            <Listeners>
                <Show Handler="console.log('ToolTip2 Shown');" />
                <Hide Handler="console.log('ToolTip2 Hidden');" />
            </Listeners>
        </ext:ToolTip>
    </ToolTips>
</ext:Button>

ToolTips can also be added to any other Control or html element on the Page. The following demonstrates adding a ToolTip to a classic <asp:Button>.

Example

<asp:Button ID="Button3" runat="server" Text="Button" />
<ext:ToolTip ID="ToolTip3" runat="server" Title="Generic ToolTip to an asp:Button Control" Target="Button3" />

The following demonstrates adding a two(2) ToolTips to a regular . Notice that the does not contain a runat="server" attribute. ToolTips can be added to any html element. The ToolTip5 demonstrates using the Ext.get function to find an element on the Page, instead of hard coding the id. Wrapping the Ext.get script with curly braces {} is required.

Example

<div id="div1" style="width:100px;height:100px;border:2px solid
blue;background-color:yellow;">My custom div element

<ext:ToolTip
    ID="ToolTip4"
    runat="server"
    Title="ToolTip added to a generic div!"
    Target="div1"
    />
<ext:ToolTip
    ID="ToolTip5"
    runat="server"
    Title="ToolTip on div using using script to get Element"
    Target="{Ext.get('div1')}"
    TrackMouse="true"
    />

I have to leave for a meeting, but when I get back later today I'll upload these samples to sandbox.ext.net.

P.s. We've built a ScriptManagerProxy control. The control will be included in the next release (v0.6).

Hope this helps.

[haltenberg]

Wow! This would be awesome! Coolite is getting cooler every day :)
As I understand, these features (ext:Tooltip) are not available in 0.5.4 yet? If so, how soon can we expect 0.6 (or is there any chance to get tooltips sooner -- in 0.5.x)?
Thank you!

[geoffrey.mcgill]

Along with Ext.get(), it's also possible to use Ext.query() to find elements on the Page. Each ToolTip can only be applied to one element at a time, and DomQuery returns an array of found elements, so we just need to just return the first element in the array to the .Target property.

The following example demonstrates using DomQuery to find the first element with the ".yellowBox" css class applied.

<div id="div1" class="yellowBox">My custom div element

<ext:ToolTip
    ID="ToolTip6"
    runat="server"
    Title="ToolTip using DomQuery"
    Target="{Ext.query('.yellowBox')[0]}"
    TrackMouse="true"
    />

Needless to say, using Ext.query can provide extremely powerful selector functionality to the ToolTip control.

DomQuery Documentation

DomQuery Tutorial

[geoffrey.mcgill]

The ToolTip control will be included with the version 0.6 release. At this point it's unlikely there will be another v0.5.x release, but the ToolTip is too integrated with the v0.6 code-base, so it would not be included anyways.

Version 0.6.0 Alpha 1 is planned to be released in early August.