This is a migrated thread and some comments may be shown as answers.

Move from one tooltip component to Telerik

2 Answers 101 Views

ToolTip

This is a migrated thread and some comments may be shown as answers.

Hessner asked on 24 Aug 2007, 12:10 PM

Hi.

To gain the Xhtml compliance I have moved to Telerik ToolTip.

When one, or a few, tips are needed the ToolTip component are very simple to use :-)

When more tips are needed it get to complicated(for me) to manage. Here are my understanding of the flow:

1. Use RadToolTipManager when multiply tips on a page.
2. The Manager are feeded with ID's - BUT NO TITLE OR TEXT?
3. A AJAX callback are done when mouseover and some text may be returned into the "tip box".

Okay, first the AJAX callback activate page_load and the ispostback property are true - in my code a redirect was fired here :-(

Now I had to re-arrange my code. But okay :-)

That done, the AJAX call was activated - I was expecting to set the "TITLE" and the "TEXT" properties and just return. But no:- "e.UpdatePanel.ContentTemplateContainer" must be used to return a SINGLE text, and therefore the skin doesn't work out on title/text!

Why not give the opportunity to "just" feed the Manager with ID's AND TITLE + TEXT, and nothing more.

I know it would make more bytes to transfer, but it would be a lot simpler to use.

Now I am thinking of using a placeholder instead and filling it with 45xRadToolTip created dynamic.

Or maybe you can suggest a better approach?

2 Answers, 1 is accepted

answered on 27 Aug 2007, 03:49 PM

Hi Hessner,
In the described scenario, you can use one of the following approaches, based on the desired result:

Set the ToolTip property of every TargetControl in the collection of the manager and set the Title property of the manager. That way, all tooltips will have the same title and the Text of the RadToolTip will equal the value of the ToolTip property.

Use the OnClientBeforeShow handler of the manager to set the Title and the Text of the RadToolTip that is about to show:

<script type="text/javascript">  

function OnClientBeforeShowHandler(object, args)  

{  

    object.set_Title('Title: ' + object.get_TargetControlID());  

    var divElement = document.createElement("DIV");  

    divElement.innerHTML = 'Text: ' + object.get_TargetControlID();  

    object.set_ContentElement(divElement);  

}  

</script> 

<form id="form1" runat="server">  

    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 

    <asp:Label ID="Label1" runat="server" Text="Label 1"></asp:Label><br /> 

    <asp:Label ID="Label2" runat="server" Text="Label 2"></asp:Label><br /> 

    <asp:Label ID="Label3" runat="server" Text="Label 3"></asp:Label><br /> 

    <asp:Label ID="Label4" runat="server" Text="Label 4"></asp:Label><br /> 

    <asp:Label ID="Label5" runat="server" Text="Label 5"></asp:Label><br /> 

    <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" 

        OnClientBeforeShow="OnClientBeforeShowHandler">  

        <TargetControls> 

            <telerik:ToolTipTargetControl TargetControlID="Label1" /> 

            <telerik:ToolTipTargetControl TargetControlID="Label2" /> 

            <telerik:ToolTipTargetControl TargetControlID="Label3" /> 

            <telerik:ToolTipTargetControl TargetControlID="Label4" /> 

            <telerik:ToolTipTargetControl TargetControlID="Label5" /> 

        </TargetControls> 

    </telerik:RadToolTipManager>

In the first two suggestions - you need not go to the server and therefore, there is no AjaxUpdate handler. In case you need to execute some server code before the RadToolTip shows, you can use the AjaxUpdate handler:

<body> 

    <script type="text/javascript">  

    function SetTitle(title)  

    {  

        var controller = Telerik.Web.UI.RadToolTipController.getInstance();  

        var tooltip = controller.get_ActiveToolTip();  

        tooltip.set_Title(title);  

    }  

    </script> 

    <form id="form1" runat="server">  

        <asp:ScriptManager ID="ScriptManager1" runat="server" /> 

        <asp:Label ID="Label1" runat="server" Text="Label 1"></asp:Label><br /> 

        <asp:Label ID="Label2" runat="server" Text="Label 2"></asp:Label><br /> 

        <asp:Label ID="Label3" runat="server" Text="Label 3"></asp:Label><br /> 

        <asp:Label ID="Label4" runat="server" Text="Label 4"></asp:Label><br /> 

        <asp:Label ID="Label5" runat="server" Text="Label 5"></asp:Label><br /> 

        <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" 

            OnAjaxUpdate="RadToolTipManager1_AjaxUpdate">  

            <TargetControls> 

                <telerik:ToolTipTargetControl TargetControlID="Label1" /> 

                <telerik:ToolTipTargetControl TargetControlID="Label2" /> 

                <telerik:ToolTipTargetControl TargetControlID="Label3" /> 

                <telerik:ToolTipTargetControl TargetControlID="Label4" /> 

                <telerik:ToolTipTargetControl TargetControlID="Label5" /> 

            </TargetControls> 

        </telerik:RadToolTipManager> 

    </form>      

</body>

protected void RadToolTipManager1_AjaxUpdate(object sender, Telerik.Web.UI.ToolTipUpdateEventArgs e)  

{  

    e.UpdatePanel.ContentTemplateContainer.Controls.Add(new LiteralControl("Text: " + e.TargetControlID));  

    string script = "SetTitle('" + e.TargetControlID + "')";  

    ScriptManager.RegisterStartupScript(this, this.GetType(), "setTitle", script, true);  

}

All the best,
Tsvetie
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Move from one tooltip component to Telerik

2 Answers, 1 is accepted