How do I set a jquery tooltip from a database on server side?

Question

I have a label on my asp.net page, it looks like this:

more info

When I hover over it, I'd like one of those jquery tooltips to display. The data will come from a database from my code behind. I've look at qtip, jquery tools, and the telerik tooltip. I'm just not sure how to set the content of the tooltip from server side.

Answer 1

I usually set a literal control to print out the value from the server I want the jQuery code to have.

So something like this:

$("div").html("<asp:literal id='litServerData" runat="server"></asp:literal>");

Then in your codebehind you set the literal to the data you want your jQuery code to have.

Of course this only works if your jQuery is on the aspx page. If not you can have a script block at the top of the page that sets a variable to the literal control value and then call your external script.

Answer 2

The simplest implementation using tooltip plugin (http://docs.jquery.com/Plugins/Tooltip) will be just:

$("a").tooltip();

The above use title as the default tooltip content.

Suppose you have X items to be tooltipped with X custom content in a sequence, here's one way

In your code-behind, string up the tooltips like this:

protected string tooltips;
//perform your data retrieval and create a string like this:
tooltips = "'tip1','tip2','tip3'";

In your javascript, to assign the tooltip string array to a javascript array:

var myToolTips = new Array(<%=mytooltips%>);

Then iterate through the items using JQuery's each():

$(".someclass a").each(function(i){
    $(this).tooltip({
       showBody: myToolTips[i];
    });
})

Answer 3

Check out this tooltip... it is activated when the object has the class "tooltip", then will display the contents of the object's title (which can contain HTML tags).