CODEWITHSUNDEEP
c#asp.netsql-servergridviewtooltip
Apollon
Apollon

Reputation: 331

Using Image from Database as Tooltip

I have a gridview.In this gridview there is a column that has hyperlink.I want to show an image as tooltip(on mouseover show the image).The path of the image is from the database("IMAGE" column) for every row. my asp is:

    <asp:GridView ID="GridView1" runat="server"  AutoGenerateColumns="False" DataKeyNames="ID" DataSourceID="SqlDataSource1" >
    <Columns>           
        <asp:TemplateField HeaderText="FULLNAME">
            <ItemTemplate>
                <asp:HyperLink runat="server" Text='<%# Eval("FULLNAME") %>' NavigateUrl='<%# Eval("ID", "Players.aspx?ID={0}") %>' ToolTip='<%# "~/images/players/" + Eval("IMAGE") %>'  ID="HyperLink1"></asp:HyperLink>
            </ItemTemplate>
        </asp:TemplateField>

Is there any suggestion to make the tooltip image. With this code it shows me the path of the image(photo shown below).

enter image description here

I want to show the image on mouseover.thanks

Upvotes: 0

Views: 1158

Answers (2)

Apollon
Apollon

Reputation: 331

This is the corect code. Is working perfect dynamically. Is from the post : Show tooltip content when its hovers Thanks also to Murali.

         <asp:HyperLink CssClass="has-tooltip" runat="server" Text='<%# Eval("FULLNAME") %>' NavigateUrl='<%# Eval("ID", "Players.aspx?ID={0}") %>' data-image='<%# "images/players/" + Eval("IMAGE") %>'  ID="HyperLink1"></asp:HyperLink>

  <script type="text/javascript">
    $(document).ready(function () {
        $('.has-tooltip').hover(function () {
            $(this).find('.tooltip').html('<img src="' + $(this).data('image') + '" alt="loading...">').fadeIn();
        }, function () {
            $(this).find('.tooltip').hide();
        }).append('<span class="tooltip"></span>');
    });

Upvotes: 0

Murali Murugesan
Murali Murugesan

Reputation: 22619

You can do it with the help of jQuery, or write a plain javascript equivalent to the below code

 <asp:HyperLink runat="server" Text='<%# Eval("FULLNAME") %>' NavigateUrl='<%# Eval("ID", "Players.aspx?ID={0}") %>' data-image-url='<%# "~/images/players/" + Eval("IMAGE") %>'  ID="HyperLink1"></asp:HyperLink>


$(document).ready(function(){

$('#<%= GridView1.ClientID%> a').mouseenter(function(){
   var imageUrl=$(this).data('image-url'); 
   var divContainer= $('<div><img src="+imageUrl+" /></div>');
    $(this).parent().append(divContainer);

});

$('#<%= GridView1.ClientID%> a').mouseleave(function(){

    $(this).next('div').hide()

});

});

Upvotes: 1

Related Questions