Question

我正在使用一段代码，当你将鼠标悬停在div上时，该代码应该添加一个跟随鼠标的“工具提示”。（它应该对3组8个div进行此操作）

工具提示的内容放在一个范围内，而该范围又位于附有.hover和.mousemove的“li”内。

这里可以看到我想要完成的“实例”。（仍在开发中，当悬停红色条时应该看到工具提示）。

http://staging2.e2e.be/ciber4/15-werfzones--de-werven-op-een-rij/zoek-op-planning

基本上，我只需要工具提示相对于红色块，而不是相对于身体？

还使用了相应的代码。

http://jsfiddle.net/JDST8/

Answer 1

您可以使用$(selector).position()来获取条形图的X / Y坐标。它返回一个带有“top”和“left”键的对象，其中包含元素的整页偏移量。

这是一个工作示例的小提琴：http://jsfiddle.net/xJSMu/

PS：无论如何，你的x和y在你的小提琴中以错误的方式偏移 - 无论如何。

PPS：我还添加了一些选择器缓存（经验法则：如果您多次使用它，请缓存它而不是再次调用jQuery构造函数）。

Answer 2

<强> HTML

<div id="tooltipWindow" class="tooltipContainer">
    <div></div>
</div>

CSS （根据需要添加样式，在下面的脚本中我还将附加元素的类添加到工具提示div中）

<style>
    .tooltipContainer {
        position: fixed;
        height: auto;
        width: auto;
        background: ghostwhite;
        padding: 10px;
    }
</style>

JAVASCRIPT （jQuery，别忘了包含jQuery库，我也添加了include标记）

<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
<script>
    //Following Tooltip
    $('.elementClassName').mousemove(function(e) {
        if ($(this).attr('title') != "") {
            $('#tooltipWindow div').html($(this).attr('title'));
            $('#tooltipWindow').css('left', e.clientX + 10).css('top', e.clientY + 10).addClass($(this).attr('class'));
            $('#tooltipWindow').show();
        }
    });
    $('.elementClassName').mouseleave(function (e) {
        $('#tooltipWindow').hide();
        });
    }

    //Non Following Tooltip
    $('.elementClassName').hover(function(e) {
        if ($(this).attr('title') != "") {
            $('#tooltipWindow div').html($(this).attr('title'));
            $('#tooltipWindow').css('left', e.clientX + 10).css('top', e.clientY + 10).addClass($(this).attr('class'));
            $('#tooltipWindow').show();
        }
    },function (e) {
        $('#tooltipWindow').hide();
        });
    }

</script>

jQuery工具提示 - 跟随鼠标

2 个答案: