2

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

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

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

谢谢你。

4

3 回答 3

4

我不熟悉喝醉的插件，但是如何将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'
    });
});

演示（单标题）：http: //jsfiddle.net/dirtyd77/JqFwP/16/

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

恕我直言，我建议您改用jQueryUI 的工具提示。我觉得会更有好处。只是一个想法！如果您有任何问题，请告诉我！

于 2013-02-28T21:24:45.703 回答
0

我想我明白了。

您需要从以下位置更改此 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/

于 2013-03-05T03:54:53.703 回答
0

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

我的第一个想法是检测容器“div”的鼠标输入并将醉酒绑定到内部标题（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 容器仅绑定一次小费，因为我无法找出插件如何操作 DOM

@585connor 建议的更新版本

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

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

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

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

于 2013-03-05T23:06:10.240 回答