Question

我正在使用jQuery插件tipsy来激活特定元素悬停时的工具提示。目前，工具提示出现在由其触发的元素的中间，但我想自定义插件，以便工具提示出现在相应的标题上。看一下我在下面链接的例子。当整个#everything div悬停时，触发工具提示，这是正确的，但我希望工具提示显示在标题上方。

示例：http://jsfiddle.net/JqFwP/2/

如果您需要更多信息或进一步解释我想要完成的任务，请告诉我。

谢谢。

Answer 1

我不熟悉tipsy插件，但如何将mouseenter事件链接到#everything？

JAVASCRIPT：

$("#everything").tipsy({
    gravity: 's'
}).mouseenter(function(){
    var top=$(this).find('h2').offset().top - 35,
        left=$(this).find('h2').offset().left - 10;
    $('.tipsy').css({
        'top': top + 'px',
        'left': left + 'px'
    });
});

DEMO（单一标题）：http://jsfiddle.net/dirtyd77/JqFwP/16/

DEMO（多个标题）：http://jsfiddle.net/dirtyd77/JqFwP/17/

恕我直言，我建议您改用jQueryUI's tooltip。我觉得这会更有益。只是一个想法！如果您有任何问题，请告诉我们！

Answer 2

我想我明白了。

您需要更改此pos变量：

           var pos = $.extend({}, this.$element.offset(), {
                width: this.$element[0].offsetWidth,
                height: this.$element[0].offsetHeight
            });

为：

           var pos = $.extend({}, this.$element.offset(), {
                width: $(this).children("h2").offsetWidth,
                height: $(this).children("h2").offsetHeight
            });

在这里工作小提琴： http://jsfiddle.net/jeremythuff/L9BVc/8/

Answer 3

从我的角度来看，操纵插件的代码并不是最好的解决方案。 @Dom的方法看起来很棒，但是不支持“引力”的引力属性的“s”值，这表示元素tipsy中心的工具提示是绑定的。

我的第一个想法是检测容器“div”的鼠标输入并将tipy绑定到内部标题（h2）。这对小标题不起作用，因为默认情况下h2显示为一个块并占用容器元素的100％。

你必须在标题中添加一些CSS样式，这将破坏你的内容。所以我设法建立了一个解决方案，我用一个span元素包装h2内容，以保持清洁和清晰。

操纵原始HTML

<div id="everything" original-title="The whole kit and caboodle.">
     <h2>Working with really great and awesome headlines</h2>
     ....
</div>

到

<div id="everything" original-title="The whole kit and caboodle.">
     <h2><span original-title="The whole kit and caboodle.">Working with really great and awesome headlines</span></h2>
</div>

最少但不是最后，我已经完善了我的代码，以便为每个div容器绑定一次tipsy，因为我无法找到插件如何操作DOM

更新版本为@ 585connor建议

http://jsfiddle.net/JqFwP/22/

更新第2卷： 我的方法还有另一个问题，如果标题太短，工具提示会被剥离到DOM之外。我已经设法使用包装范围中的类和一些css代码来解决这个问题。

此问题的证明 http://jsfiddle.net/JqFwP/25/

我的解决方法 http://jsfiddle.net/JqFwP/24/

jQuery Tipsy Tooltip插件定制

3 个答案: