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

每次鼠标悬停按钮时，都会向按钮的父级添加一个新的.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，每次用户将鼠标悬停在按钮上时都会显示该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内置的事件处理，并使用选项或回调对其进行自定义。

我建议：

每按一次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

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

2 个答案:

默认qTip

qTip的目标

标准qTip使用