ASP.NET: Tooltip in Datalist

nehas1jan

Rate me:

0.00/5 (No votes)

21 May 2013CPOL

14.6K

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

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

HTML

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

nehas1jan

Software Developer (Junior) TIV Labs

India

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.