如何刷新 qtip 标签以在悬停时显示特定按钮的新标签？

Question

我的页面上有几个按钮，我想在工具提示中显示全名而不是缩写名称（显示在按钮上）onhover/onmouseover。

所以像上面有美国字样的按钮，悬停时，我想使用 qtip 在标签工具提示上显示美利坚合众国。

这是我的尝试：

JavaScript 方：

        $('#USA').mouseover(function () {
           Objects.ToolTip("#USA", "United States of America");
        }).mouseout(function () {
            //  $("#USA").qtip('destroy', true);
            $('.qtip').remove();
        });

        $("#JP").mouseover(function () {
            Objects.ToolTip("#JP", "Japan");
        }).mouseout(function () {
            //  $("#JP").qtip('destroy', true);
            $('.qtip').remove();
        });

其中工具提示：

ToolTip:function(elementId,toolTipContent){
            $(elementId).parent().mouseover(function (event) {

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

                        my: 'top center',
                        at: 'top center',
                        target: 'mouse',
                        adjust: {
                            x: 0,
                            y: -35,
                            mouse: true  
                        }
                    },
                    style: {
                        classes: "qtip-tooltip-for-ellipse"
                    }
                }, event);
            });
        }

Html/css 方：

<div id="countries-panel" style="margin-top: 0">
    <div style="margin-top: 10px">
        <button id="USA"  class="standard-button-with-icon" data-val-btnname="USA-btn" style="width: 70px; height: 20px" onclick="CountryBtn.Click('Cbtn')"><span class="c-button">USA</span><span class="circle c-circle" style="background-color: rgb(255,0,0)"></span></button>
    </div>

    <div style="margin-top: 10px">
        <button id="JP"  class="standard-button-with-icon" data-val-btnname="JP-btn" style="width: 70px; height: 20px" onclick="CountryBtn.Click('Cbtn')"><span class="c-button">JP</span><span class="circle c-circle" style="background-color: rgb(0,0,255)"></span></button>
    </div>
</div>

所以，我遇到的问题是 'USA' 全名一直显示在我的所有按钮上，而不是每个按钮的新内容。

就像当我悬停在美国按钮上时，我得到了美利坚合众国。如果我将鼠标悬停在 JP 按钮上，我也会看到美利坚合众国，即使它应该是日本。

上面的代码可能令人困惑，但它显示了我尝试删除或破坏 qtip 标签并为下一个按钮悬停重新实例化新标签。但是，它不起作用。它完全删除了 qtip 标签并且不再显示新标签。

所以我想知道如何刷新标签以针对页面上的不同按钮显示不同的内容？

Answer 1

现在有效：http://jsfiddle.net/slicedtoad/6vgt8ju3/4/

基本上，您添加了两次悬停侦听器。一次使用 .mouseover，一次使用 CountryToolTip.

// Create the tooltips only when document ready
$(document).ready(function () {
    var CountryToolTip = function (elementId, toolTipContent) {

        //No more .mouseover here

        $(elementId).parent().qtip({
            overwrite: false,
            content: toolTipContent,
            once: false,
            show: {
                event: event.type,
                ready: true
            },
            position: {
                my: 'top center',
                at: 'top center',
                target: 'mouse',
                adjust: {
                    x: 0,
                    y: 10,
                    mouse: true
                }
            },
            style: {
                classes: "qtip-tooltip-for-ellipse"
            }
        }, event);
    }

    $('#USA').mouseover(function () {
        CountryToolTip("#USA", "United States of America");
    }).mouseout(function () {
        $("#USA").qtip('destroy', true);
    });

    $("#JP").mouseover(function () {
        CountryToolTip("#JP", "Japan");
    }).mouseout(function () {
        $("#JP").qtip('destroy', true);
    });
});

这是 jsfiddle 代码，对于您的应用，您似乎需要像这样定义 CountryToolTip：

ToolTip:function(){...

而不是

var CountryToolTip = function(){...

Answer 2

你的代码到这部分都没有问题；

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

            $(this).parent().qtip({

            ....
            });
});
 .....

所以基本上你是在调用“.parent”两次。只需从 $(this).parent().qtip 中删除“.parent()”，它就可以正常工作了。

如何刷新 qtip 标签以在悬停时显示特定按钮的新标签？

How do I refresh the qtip label to display new label for specific button on hover?

javascript

jquery

css

qtip

qtip2