使用圖像從數據庫作爲工具提示

Question

我有一個gridview。在這個gridview有一個有超鏈接的列。我想顯示一個圖像作爲工具提示（在鼠標懸停顯示圖像）。圖像的路徑是從數據庫（「圖像」列）。 我的ASP是：

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

有任何建議做出提示圖像。 使用此代碼，它顯示了圖像的路徑（照片如下所示）。

我想說明的mouseover.thanks

Answer 1

這是corect代碼。動態完美工作。來自帖子：Show tooltip content when its hovers 也感謝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>'); 
    }); 

Answer 2

圖像您可以使用jQuery的幫助下做到這一點，或者寫一個普通的JavaScript等同於下面的代碼

<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() 

}); 

});