为什么qtip工具提示出现在不共享相同ID的其他按钮上？ [英] Why does the qtip tooltip appear on other buttons that do not share the same id?

问题描述

所以，我想显示特定按钮的工具提示，而不是其他按钮。
这里是我的代码与一个例子，我想在TAB按钮悬停时显示带有TAB字样的工具提示。但是，如果我将鼠标悬停在其他按钮（如FOO和BAR）上，则会显示TAB。我不知道会是什么原因？是因为它们共享同一个类，即使我为TAB放了一个特定的ID吗？

So, I want to show tooltips for specific buttons and not for other buttons. Here's my code with an example where I want to show tooltip with the word "TAB" on hover for the TAB button. However, if I hover over other buttons like FOO and BAR, it shows TAB too. I'm not sure what would be causing this? Is it because they share the same class even though I put a particular ID for TAB?

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>

推荐答案

默认qTip

让我们翻阅默认的qtip功能。

Default qTip

Let's go over the default qtip functionality.

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

这将创建一个qtip，每当用户将鼠标悬停在按钮上时显示。它可以无需指定鼠标悬停处理程序。 （演示）

This creates a qtip that appears everytime the user mouses over the button. It does this without having to specify a mouseover handler. (demo)

qtip出现在 .qtip（）左边的任何选择中。所以

The qtip appears on whatever selection is to the left of the .qtip(). So

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

在这个函数中，这个是窗口对象，所以你要添加一个qtip到全局窗口对象，但只创建和销毁它

In that function, this is the window object. So you are adding a qtip to the global window object but only creating and destroying it when you mouseover the parent of a button. Needless to say, there isn't a good reason to do this.

除非你有一些边缘情况手动显示和隐藏qtips，不要使用qTip的内置事件处理和自定义它的选项或回调。

Unless you have some edge case for manually showing and hiding of qtips, don't. Instead utilize qTip's built in event handling and customize it with options or callbacks.

我建议：

• 每个按钮1个qtip


• 只创建qtip
  
• 使用
  
• 在网页载入时（或小工具初始化等）建立qtip .com / options＃showrel =nofollow> show 和 隐藏 控制可见性的选项

• 1 qtip per button
• create the qtip only once
• create the qtip when the page loads (or the widget initializes, etc)
• use the show and hide options to control visibility

所以，从你的代码，我想象你想要像：

So, from your code, I imagine you want something like:

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

小提琴

这篇关于为什么qtip工具提示出现在不共享相同ID的其他按钮上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！