0

我有一个页面上有一些 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 只会在第一次显示提示。其他人会展示它，直到奶牛回家。

请注意，如果您刷新并从西瓜开始，它只会显示第一次，但每次都会显示其余所有内容。

我做错了什么？

（而且我已经尝试过使用“每个”结构——它根本没有改变行为）

谢谢！

4

1 回答 1

1

只是我在编辑代码时发现的。如果您将代码更改为此：

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

工具提示工作正常。

于 2013-06-24T17:14:06.050 回答