ASP.NET: Tooltip in Datalist

nehas1jan

0/5 (0 vote)

May 21, 2013

CPOL

14696

How to add Tooltip in datalist

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.