Question

我有一个页面上有一些DIV。我想在点击DIV时显示qTip2。由于我正在使用qTip的其他一些东西，如果可能的话，我想一遍又一遍地重复使用同一个。

所以，我使用qTip2演示作为起点，据我所知，我已经完全复制了它。这是问题所在：它只显示点击的第一个元素的qtip - 第一次。它会在所有其他元素上显示您想要点击它们的次数，但第一次只显示第一次。

有没有人参与其中并获得补救措施？

以下是我创建的展示问题的示例应用的代码：

CSS：

#Container { border: 1px solid black; }
#Container > DIV { float: left; border: 2px outset silver; margin: 5px; }
#Container > DIV:nth-last-child(1) { float: none; border: none; height: 1px; overflow: hidden; margin: -1px 0 0 0;}

JavaScript的：

var Container;
var ContainerEndItem;
$(document).ready(function () {
Container = $('#Container');
if(Container.length == 0){
    alert("Container not found!");
    return;
}

var addLinks = $('.TipTarget');
$('<div>Test</div>').qtip({
            content : 'Test',
            position: {
                target: 'mouse', // Use the triggering element as the positioning target
                adjust: { mouse: false, method: 'flip' },
                my: 'left center',
                at: 'right center',
                effect: true    // Enable default 'slide' positioning animation
            },
            show: {
                target: addLinks,
                event: 'click',
                delay: 0
            },
            hide: {
                event: 'none'
            },
            events: {
                show: function (event, api) {
                    // Update the content of the tooltip on each show
                    var target = $(event.originalEvent.target);

                    if(target.length) {
                        api.set('content.text', 'Looking at: ' + target.text());
                    }
                }
            }
        });
});

HTML：

<div id="Container">
  <div id="Apples" class="TipTarget">Apples</div>
  <div id="Watermelons" class="TipTarget">Watermelons</div>
  <div id="Peaches" class="TipTarget">Peaches</div>
  <div id="Meat" class="TipTarget">Meat</div>
  <div id="Clear" style="clear: both">&nbsp;</div>
</div>

JQuery：1.8.3

qTip2：2.0.1

这是一个具有这种确切设置的jsFiddle： http://jsfiddle.net/Dracorat/Z3WqC/

请注意，如果您首先点击Apple，然后点击Watermelon，然后点击Peaches，然后点击Apples，然后点击Watermelon，再点击Peaches，并继续重复，Apple将仅在第一次显示提示。其他人将展示它直到奶牛回家。

请注意，如果您刷新并开始使用西瓜，它将仅显示第一次，但所有其余时间将显示。

我做错了什么？

（我已经尝试过使用“each”结构 - 它根本没有改变行为）

谢谢！

Answer 1

我在编辑代码时发现的东西。如果您将代码更改为：

adjust: { mouse: true, method: 'flip' },

工具提示工作正常。

JQuery插件qTip2 - Click-to-show仅适用于第一次元素

1 个答案: