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

Simple question: best way to show a static tooltip with two "trigger" IDs

1 Answer 59 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Kevin M
Top achievements
Rank 1
Kevin M asked on 01 Oct 2009, 03:00 PM
Hi all, sorry for the simplicity of this question!

I have a "shopping cart" section on a website, and in that area there are two elements that when moused over should show a tooltip with the contents of the shopping cart. 

Up to this point only one of the elements (a <div id="linkShoppingCart"> ) needed to trigger the tooltips appearance so simply using a <telerik:RadToolTip> with a targetid="linkShoppingCart" worked perfectly - however now I need two separate elements to cause the tooltips appearance.

I have looked through/read through the RadToolTip vs RadToolTipManager (etc) documents/tutorials but most of the information I read is focused on loading dynamic content from user controls (etc).  I have a <div> that I'd like to load and while it does have some dynamic content that is loaded, it is the same regardless of which target I mouse over.

What is the best most efficient (and hopefully simplest!) way of accomplishing what I want?

Thanks for the help, and sorry for the simple question!

Edit: I should point out that if it was possible to have two target IDs in a simple <telerik:RadToolTip> that would be ideal, but from what I understand a radtooltip can only have one target id.

1 Answer, 1 is accepted

Sort by
0
Tsvetie
Telerik team
answered on 06 Oct 2009, 12:18 PM
Hello Kevin M,
I will start with your last question - yes, the RadToolTip control can have only one target element at a time. However, you can use the client API of the control to set the target control and show/hide the tooltip. For example, in our Range Slider demo, we use a single RadToolTip for the two dragHandles of the RadSlider control.

Have a look at the code fragment below - it demonstrates how you can show the same tooltip for two DIV elements:
<head runat="server"
    <title></title> 
    <style type="text/css"
    .CartClass 
    { 
        width:50px; 
        height:50px; 
        background-color:Red; 
    } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"
    <asp:ScriptManager ID="ScriptManager1" runat="server"
    </asp:ScriptManager> 
    <div id="linkShoppingCart1" class="CartClass" onmouseover="ShowToolTip(this);return false;"
        cart 1</div> 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
    <div id="linkShoppingCar2" class="CartClass" onmouseover="ShowToolTip(this);return false;"
        cart 2</div> 
    <telerik:RadToolTip ID="RadToolTip1" ShowEvent="FromCode" runat="server" RelativeTo="Element" 
        Width="200px" Height="50px"
        content 
    </telerik:RadToolTip> 
 
    <script type="text/javascript"
        function ShowToolTip(div) 
        { 
            var tooltip = $find("<%= RadToolTip1.ClientID %>"); 
            tooltip.set_targetControl(div); 
            if(tooltip.isVisible()) 
            { 
                tooltip.updateLocation(); 
            } 
            else 
            { 
                tooltip.show();  
            } 
        } 
    </script> 
 
    </form> 
</body> 


Greetings,
Tsvetie
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Tags
ToolTip
Asked by
Kevin M
Top achievements
Rank 1
Answers by
Tsvetie
Telerik team
Share this question
or