当鼠标悬停显示包含表格的工具提示时，如何获得图像？

I have been trying to do this for 1day and 6 hours (literally) and I am pulling my hair out. I have tried google wayy to much that I have ran out of searches and combination of words and have even been back to the links I visted before just to check if I missed anything.

我一直试图这样做1天6小时(字面意思),我把头发拉出来。我已经尝试过google wayy,因为我已经用完了搜索和单词的组合,甚至回到了我之前访问过的链接,只是为了检查我是否遗漏了任何内容。

What I need is: When someone moves their mouse over an image, it displays a tooltip. That being the easy part in which I have figured out. The hard part is putting a table in that tooltip so it organizes what I wish to show. An exact replica of what I need is at http://occultdarkr.enjin.com/ I also need it to follow the mouse and have the opacity like the one in the site.

我需要的是:当有人将鼠标移动到图像上时,它会显示工具提示。这是我想通过的简单部分。困难的部分是在工具提示中放置一个表格,以便组织我想要展示的内容。我需要的完全复制品是http://occultdarkr.enjin.com/我还需要它跟随鼠标并具有像网站中的不透明度。

I have tried many things when it came to adding tables in a tooltip however it never shows the table. It either shuts down the tooltip so nothing shows or it shows the actual code for the table. Real pain. I tried using javascript and jquery stuff that I have found on the net, nothing works with what I need though.

在工具提示中添加表格时我尝试过很多东西,但它从不显示表格。它要么关闭工具提示,所以没有显示或显示表的实际代码。真正的痛苦。我尝试使用我在网上找到的javascript和jquery的东西,但没有任何东西适用于我需要的东西。

Please any helpful help will be greatly appreciated.

非常感谢任何有用的帮助。

3 个解决方案

#1

There are two way to do that, One of them that you can implement tooltip with jquery function such as like below,

有两种方法可以做到这一点,其中一种方法可以用jquery函数实现工具提示,如下图所示,

$("p").mouseup(function(){
    $(this).append('<span id='sth'><table><tr><td>foo</td><td>bar</td></tr></table></span>');
}).mousedown(function(){
    $("#sth").remove();
});

next one, you can use some jQuery tooltip plugin like,

下一个,你可以使用一些jQuery工具提示插件,

#2

I would first try to put your table in a hidden div, or create the div dynamically with your table data when you want to show it (absolute position ...), then you add a function on the onmousemove event where you change your div position (make it the mouse position) and that should do it

我首先尝试将你的表放在一个隐藏的div中,或者当你想要显示它时,用你的表数据动态创建div(绝对位置......),然后你在onmousemove事件中添加一个函数来改变你的div位置(使其成为鼠标位置),应该这样做

if you need more precision feel free to ask I'll edit my answer if needed

如果您需要更高精度,请随时询问我是否会根据需要编辑我的答案

#3

Below is the sample code that you can modify according to your needs.

以下是您可以根据需要修改的示例代码。

HTML

<img class="HelpIcon" src="help.png"  title="<table border='1'><tr><td>1</td><td>First Item</td></tr><tr><td>2</td><td>Second Item</td></tr><tr><td>3</td><td>Third Item</td></tr></table>"  />

Jquery

$(document).ready(function () {
    var txt = "";
    $('.HelpIcon').mouseenter(function () {
        txt = $(this).attr('title');

        $(this).attr('title', '');
        var offset = $(this).offset();
        var $tooltip = $('<div></div>')
        .attr('id', 'HelpDiv')
        .css('margin-left', offset.left)
        .html(txt);

        $(this).after($tooltip);


    });

    $('.HelpIcon').mousemove(function (e) {
        $("#HelpDiv").css('left',e.pageX);
        $("#HelpDiv").css('top',e.pageY); 
    });

    $('.HelpIcon').mouseleave(function () {

        $('#HelpDiv').remove();
        $(this).attr('title', txt);



    });

});

#1