Introduction
In this tip, I am going to explain how to add tooltip. Here I have taken an example to show tooltip on the profile images. Like the below image:
Background
Add plugin jquery.tooltip. You can download it.
Using the Code
First, I bound a datalist from database containing the details of users. I bound two fields name and image only, image to display in the datalist and name to show in tooltip.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Show Gridview Rows Details in tooltip with jQuery</title>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<%--<script src="jquery.tooltip.min.js" type="text/javascript"></script>--%>
<script src="jquery-tooltip/jquery.tooltip.min.js" type="text/javascript"></script>
<script type="text/javascript">
function InitializeToolTip() {
$(".datalistToolTip").tooltip({
track: true,
delay: 0,
showURL: false,
fade: 100,
bodyHandler: function () {
return $($(this).next().html());
},
showURL: false
});
}
</script>
<script type="text/javascript">
$(function () {
InitializeToolTip();
})
</script>
<style type="text/css">
#tooltip {
position:absolute;
z-index: 1000;
border:none;
background-color:white;
padding: 0px;
opacity: 0.50;
}
#tooltip h3, #tooltip div { margin: 0; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<br />
<br />
<br />
<asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal">
<ItemTemplate>
<asp:Label ID="Label1" runat="server"
Text='<%# Eval("Name")%>' Visible="false"></asp:Label>
<a href="#"> <asp:Image ID="Image1" runat="server"
ImageUrl='<%# Eval("image_path")%>' Width="50px" Height="50px"
CssClass="datalistToolTip" />
<div id="tooltip" style="display: none;">
<table>
<tr>
<td><%# Eval("Name")%></td>
</tr>
</table>
</div></a>
</ItemTemplate>
</asp:DataList>
<br />
</div>
</form>
</body>
</html>
Points of Interest
Do not forget to bind a datalist from your database when you done with the declarations on head section in the aspx page and bind the datalist. Now add a table in datalist item template field so that tooltip can show the data you want like I added a div with the id “tooltip”.
<div id="tooltip" style="display: none;">
<table>
<tr>
<td><%# Eval("Name")%></td>
</tr>
</table>
</div>
When you are done all, save the page and view the page in browser. It works perfectly.
Here when you download plugin, describe that in the head section as I did just to fetch the information of tooltip on mouseover.
So, on mouseover, this div will show you the data that you want.
Thanks.
