Question

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

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

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

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

Answer 1

有两种方法可以做到其中一个可以用jquery函数实现工具提示，如下面的那样，

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

下一个，您可以使用一些jQuery工具提示插件，

Answer 2

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

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

Answer 3

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

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



    });

});

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

3 个答案: