使用数据库中的图像作为工具提示

Question

我有一个gridview。在这个gridview中有一个有超链接的列。我想将图像显示为工具提示（在鼠标悬停时显示图像）。图像的路径来自数据库（“IMAGE”列）对于每一行。 我的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

你可以在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()

});

});

Answer 2

这是正确的代码。动态完美。来自帖子：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>');
    });