为什么 qtip 工具提示会出现在其他不共享相同 id 的按钮上？

Question

所以，我想显示特定按钮的工具提示，而不是其他按钮。这是我的代码示例，我想在悬停 TAB 按钮时显示带有单词 "TAB" 的工具提示。但是，如果我将鼠标悬停在 FOO 和 BAR 等其他按钮上，它也会显示 TAB。我不确定是什么原因造成的？是不是因为他们共享相同的 class 即使我为 TAB 输入了特定的 ID？

js 函数：

    $('#TabBtn').mouseover(function () {
        BrowserSide.Objects.ToolTip("#TabBtn", "Tab");
    }).mouseout(function () {
        $("#TabBtn").qtip('destroy', true);
    });

工具提示在哪里：

ToolTip:function(elementId,toolTipContent){

    $(elementId).parent().mouseover(function (event) {

        $(this).qtip({
            overwrite: false,
            content: toolTipContent,
            once: false,
            show: {
                event: event.type,
                delay: 500,
                ready: true,
            },
            position: {

                my: 'top center',
                at: 'top center',
                target: 'mouse',
                adjust: {
                    x: 0,
                    y: -35,
                    mouse: true  // Can be omitted (e.g. default behaviour)
                }
            },
            style: {
                classes: "qtip-tooltip-for-ellipse"
            }
        }, event);
  });
}

Html代码：

<button id="TabBtn" class='newUI-toolbar-button-with-icon' style="margin:10px 8px 5px 8px; width:40px !important; height:30px !important"><span id="toolbar-TAB" class="newUI-toolbar-button-label" style="position: relative; top: -2px">Tab</span></button>
<button class='newUI-toolbar-button-with-icon' style="margin:10px 8px 5px 8px; width:40px !important; height:30px !important"><span id="toolbar-FOO" class="newUI-toolbar-button-label" style="position: relative; top: -2px; left: -4px">Foo</span></button>
<button class='newUI-toolbar-button-with-icon' style="margin:10px 8px 5px 8px; width:40px !important; height:30px !important"><span id="toolbar-BAR" class="newUI-toolbar-button-label" style="font-size: 8px !important;position: relative; top: -3px; left: -4px">Bar</span></button>

Answer 1

每次将鼠标悬停在按钮上时，您都会向按钮的父级添加一个新的 .mouseover 处理程序。这有什么原因吗？

如果你这样做就足够了：

$('#TabBtn').mouseover(function (event) {
    BrowserSide.Objects.ToolTip("#TabBtn", "Tab", event);
})

function(elementId,toolTipContent, event){
        $(this).qtip({
            overwrite: false,
            content: toolTipContent,
            once: false,
            show: {
                event: event.type,
                delay: 500,
                ready: true,
            },
            position: {

                my: 'top center',
                at: 'top center',
                target: 'mouse',
                adjust: {
                    x: 0,
                    y: -35,
                    mouse: true  // Can be omitted (e.g. default behaviour)
                }
            },
            style: {
                classes: "qtip-tooltip-for-ellipse"
            }
        }, event);
}

Answer 2

默认 qTip

让我们回顾一下默认的 qtip 功能。

$('#btn').qtip({
    content: "Mouseover in a qtip"
});

这会创建一个 qtip，每次用户将鼠标悬停在按钮上时都会出现该提示。它无需指定鼠标悬停处理程序就可以做到这一点。 (demo)

qTip 的目标

qtip 会出现在 .qtip() 左侧的任何选择上。所以

// when parent of button is moused over
$(elementId).parent().mouseover(function (event) {
    // add a qtip to $(this)
    $(this).qtip({

在该函数中，this 是 window 对象。因此，您正在向全局 window 对象添加一个 qtip，但仅当您将鼠标悬停在按钮的父级上时才创建和销毁它。不用说，没有充分的理由这样做。

标准 qTip 用法

除非您有一些用于手动显示和隐藏 qtips 的极端情况，否则不要这样做。而是利用 qTip 的内置事件处理并使用选项或回调对其进行自定义。

我会推荐：

每个按钮 1 个 qtip
仅创建一次 qtip
在页面加载（或小部件初始化等）时创建 qtip
使用 show and hide 选项控制可见性

所以，从你的代码来看，我想你想要这样的东西：

var ToolTip = function (element, toolTipContent) { // Adds one qtip to one element. 
    $(element).qtip({
        content: toolTipContent,
        show: {
            event: "mouseenter",
            delay: 500,
            //ready: true, //don't do this
        },
        position: {
            target: 'mouse', //qtip will follow the mouse
            my: 'top center',
            at: 'top center',
            adjust: {
               x: 0,
               y: 15,
            }
        },
        style: {
            classes: "qtip-tooltip-for-ellipse"
        }
    });
};

ToolTip("#TabBtn", "Tab"); // This should be run only once at page load

Fiddle

为什么 qtip 工具提示会出现在其他不共享相同 id 的按钮上？

Why does the qtip tooltip appear on other buttons that do not share the same id?

javascript

css

jquery

qtip2

默认 qTip

qTip 的目标

标准 qTip 用法