Populate tooltips dynamically with HTML

6 posts, 0 answers
  1. ppo
    ppo avatar
    2 posts
    Member since:
    Mar 2009

    Posted 12 Mar 2009 Link to this post

    Hi,

    Im trying to use rad tooltips to show html articles (that I store on a database) on multiple pages of a CMS.

    Basically giving my client the ability to show articles everywhere just by using a tag with the respective ID.

    So on the code I'd like to replace the "tooltip calling tag" with the actual tooltip code.

    I managed to do the following so far:


    <form runat="server"
     
    <telerik:RadScriptManager ID="ScriptManager1" runat="server"  
        EnableTheming="True" OutputCompression="AutoDetect"
    </telerik:RadScriptManager> 
     
     
    <script type="text/javascript"
     function showToolTip(element) { 
         var tooltipManager = $find("<%= RadToolTipManager1.ClientID %>"); 
     
         if (!tooltipManager) return; 
     
         var tooltip = tooltipManager.getToolTipByElement(element); 
     
         if (!tooltip) { 
             tooltip = tooltipManager.createToolTip(element); 
         } 
     
         element.onmouseover = null
         tooltip.show(); 
     } 
    </script> 
     
    <telerik:RadToolTipManager ID="RadToolTipManager1" 
      Width="" 
      HideEvent="ManualClose" 
      RelativeTo="Element" 
      Position="BottomCenter" 
      runat="server" 
      Autotooltipify="false" 
      OffsetY="0" Sticky="True" Font-Bold="False" Title="Knowledge Database Helper"
    </telerik:RadToolTipManager> 
     
    <img title="<div><i>testing html</i></div><br/>" alt="test" src ="../template/images/knowledge.gif" ID="rad<%=id %>" onmouseover='showToolTip(this);' /> 
     
     
    </form> 

    The HTML code under the title tag would be gathered from the DB.

    Is there any better way to populate tooltips with the HTML content without using the title attribute? because I also need to look at this code from the SEO point-of-view..

    Thank you in advance.
  2. Tervel
    Admin
    Tervel avatar
    1337 posts

    Posted 16 Mar 2009 Link to this post

    Hi ppo,

    My suggestion is to consider using a WebService - in fact this is the very approach that was taken in the demo from which you have copied the javascript code:
    http://demos.telerik.com/aspnet-ajax/tooltip/examples/radtooltipmanagerclientapi/defaultcs.aspx

    Best regards,
    Tervel
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. ppo
    ppo avatar
    2 posts
    Member since:
    Mar 2009

    Posted 16 Mar 2009 Link to this post

    Thanks for your reply!

    I did have a look at that demo but I don't understand a few things.

    Is set_value the same as set_content ? (I couldnt find set_value on the documentation: http://www.telerik.com/help/aspnet-ajax/tooltip_clientradtooltip.html )


    Also, how did the data (html) go from the database to the javascript? By sending "this" arent you sending only the picture element?

    Im not getting how the data flows on the example...
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 19 Mar 2009 Link to this post

    Hello ppo,

    Straight to your questions:

    1. The set_value and set_content methods are not the same. The first one sets a value which is associated with the tooltip in order to extract it later and determine what content to load. The set_content method actually sets content of the tooltip.
    2. The data is actually taken in the WebService method. What is done there is that the value which was set to the tooltip is extracted and used as a primary key to determine what exact information should be taken from the database.

    We understand that some of the demos are a little bit complex and viewing only a few of their files is not enough to understand the scenario. That is why when you install RadControls, our online examples projects are automatically installed on your computer and you can not only examine their full source code, but also extend them further in order to meet your requirements.

    You can open the demos from here:

    Start\Programs\Telerik\RadControls for ASPNET AJAX\Open Sample WebSite In VisualStudio

    The actual location on your hard disk is the following one:

    C:\Program Files\Telerik\RadControls for ASPNET AJAX \Live Demos

    I hope that this information is helpful and examining the full source code will help you get a better understanding on the setup.

    Regards,
    Svetlina
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  6. T F
    T F avatar
    8 posts
    Member since:
    May 2010

    Posted 11 May 2010 Link to this post

    I'm looking for something similar.  I have a web service that returns an html string.  I want the tooltip to render the html.  Instead it's displaying the string 'as is'.  How do you get the tooltip to display the string as html? 
  7. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 13 May 2010 Link to this post

    Hello T F,

    Once the response is received the we add it to the RadToolTip's content div with the following code:
    div.innerHTML = response;
    The following code:
    [WebMethod]
       public String SbuDetailHtml(object context)
       {
           string value;
           string regular = "regular<br/>regular<H1>regular</H1>";
           string encoded = Server.HtmlEncode("encoded<br/>encoded<H1>encoded</H1>");
           return value = regular + encoded;
       }
    will display:

    regular
    regular

    regular

    encoded<br/>encoded<H1>encoded</H1>

    Hope this helps.


    Regards,
    Petio Petkov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017