In this article I am going to explain how to add tool-tip
Here I have taken an example to show tool-tip on the profile images. Like the
below image :
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.
Follow below steps :
- Add plugin jquery.tooltip.You can download it .
- Write the below code in aspx page :
<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>
3.
Do not forget to bind a datalist from your database.When you done all save the page
and view the page in browser I tll work perfectly.Here when you download plugin
describe that in the head section as I did just to fetch the information of
tooltip on mouse over.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>
So, on mouse over this div ll show you the data which you
want.
Thanks.
No comments:
Post a Comment