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

Question

所以，我想显示特定按钮的工具提示，而不是其他按钮。 这是我的代码示例，我想在悬停时显示带有“TAB”字样的工具提示，用于 TAB 按钮。但是，如果我将鼠标悬停在 FOO 和 BAR 等其他按钮上，它也会显示 TAB。我不确定是什么原因造成的？是否因为即使我为 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

默认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 是窗口对象。因此，您正在向全局窗口对象添加一个 qtip，但仅当您将鼠标悬停在按钮的父级上时才创建和销毁它。不用说，这样做没有充分的理由。

标准 qTip 用法

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

我会推荐：

• 每个按钮 1 qtip
• 只创建一次 qtip
• 在页面加载（或小部件初始化等）时创建 qtip
• 使用show 和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

Answer 2

每次将鼠标悬停在按钮上时，您都会向按钮的父级添加一个新的 .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);
}