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：

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标签以在悬停时显示特定按钮的新标签？

2 个答案: