데이터베이스의 이미지를 툴팁으로 사용하기

Question

나는이 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

에 해당 자바 스크립트 이것은 핵심 코드입니다. 완벽하게 동적으로 작동하고 있습니다. 게시물에서입니다 : 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를의 도움으로 그것을 할, 또는 일반을 쓸 수를 표시 할 아래 코드

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

}); 

});