Populate tooltips dynamically with HTML

[ppo]

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.

[Tervel]

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.

[ppo]

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...

[Svetlina Anati]

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.

[T F]

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? 

[Petio Petkov]

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.