Post
Ask Question

ASP.NET: Tooltip in Datalist

In this article, I explain how to add a tooltip. Here I provide an example to show a tooltip on the profile images. Like in the following image :

ASP.NETTooltip.jpg

First I bound a datalist from a database containing the details of users. I bound two fields, name and image, image is only for displaying in the datalist and name is to be shown in the tooltip.

Use the following procedure:

  1. Add the plugin jquery.tooltip. You can download it.
  2. Write the following code in the aspx page:
    1. <htmlxmlns="http://www.w3.org/1999/xhtml">  
    2. <head>  
    3. <title>Show Gridview Rows Details in tooltip with jQuery</title>  
    4. <scriptsrc="http://code.jquery.com/jquery-1.8.2.js"type="text/javascript"></script>  
    5. <%--<script src="jquery.tooltip.min.js" type="text/javascript"></script>--%>  
    6.     <scriptsrc="jquery-tooltip/jquery.tooltip.min.js"type="text/javascript"></script>  
    7. <scripttype="text/javascript">  
    8.     function InitializeToolTip() {  
    9.         $(".datalistToolTip").tooltip({  
    10.             track: true,  
    11.             delay: 0,  
    12.             showURL: false,  
    13.             fade: 100,  
    14.             bodyHandler: function () {  
    15.                 return $($(this).next().html());  
    16.             },  
    17.             showURL: false  
    18.         });  
    19.     }  
    20. </script>  
    21. <scripttype="text/javascript">  
    22.     $(function () {  
    23.         InitializeToolTip();  
    24.     })  
    25. </script>  
    26. <styletype="text/css">  
    27. #tooltip {  
    28. position:absolute;  
    29. z-index:1000;  
    30. border:none;  
    31. background-color:white;  
    32. padding:0px;  
    33. opacity:0.50;  
    34. }  
    35. #tooltiph3,#tooltipdiv { margin:0; }  
    36. </style>  
    37. </head>  
    38. <body>  
    39. <formid="form1"runat="server">  
    40. <div>  
    41.     <br/>  
    42.     <br/>  
    43.     <br/>  
    44.     <br/>  
    45. <asp:DataListID="DataList1"runat="server"RepeatDirection="Horizontal">  
    46.         <ItemTemplate>  
    47.             <asp:LabelID="Label1"runat="server"Text='<%# Eval("Name")%>'Visible="false"></asp:Label>  
    48.            <ahref="#"><asp:ImageID="Image1"runat="server"ImageUrl='<%# Eval("image_path")%>'Width="50px"Height="50px"CssClass="datalistToolTip"/>  
    49.             <divid="tooltip"style="display:none;">  
    50. <table>  
    51. <tr>  
    52. <td><%# Eval("Name")%></td>  
    53. </tr>  
    54. </table>  
    55. </div></a>  
    56.         </ItemTemplate>  
    57.     </asp:DataList>  
    58.     <br/>  
    59.  </div>  
    60. </form>  
    61. </body>  
    62. </html>  
  3. Do not forget to bind a datalist from your database.

  4. When you are done, save the page and view the page in a browser; it will work perfectly.

    Here when you download the plugin, describe it in the head section as I did just to fetch the information of the tooltip on mouse hover.

    When you are done with the declarations in the head section in the aspx page and bind the datalist, add a table to the datalist item template field so that the tooltip can show the data you want. For example I added a div with the id "tooltip"; see:

    1. <divid="tooltip"style="display:none;">  
    2. <table>  
    3. <tr>  
    4. <td><%# Eval("Name")%></td>  
    5. </tr>  
    6. </table>  
    7. </div>  

So, on mouse hover this div will show you the data that you want.


Similar Articles