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

2 posts, 0 answers
  1. Kevin M
    Kevin M avatar
    4 posts
    Member since:
    Sep 2009

    Posted 01 Oct 2009 Link to this post

    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.

  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 06 Oct 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top