Friday 17 May 2013

ASP.Net : Tooltip in Datalist | Neha Sharma



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 :

  1.  Add plugin jquery.tooltip.You can download it .
  2. 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 />
&nbsp;</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

Which Game Engine you should choose | Neha Sharma

Unity3D and Unreal Engine are only 2 Game engine which executes an indispensable position in Game Industry. The choice of the engine must ...