Question

我有一个qtip2工具提示，它从下一个元素加载静态HTML内容。工具提示成功加载第一个悬停时的内容。在第二次悬停时，工具提示的内容面板为空白。

http://jsfiddle.net/adamtsiopani/m4hohp4e/

HTML

<a href="#" class="tooltip" title="My Title">hover here</a>
<div class="tooltip-content">
    <!-- some content -->
</div>

CSS

.tooltip-content {
    display: none;
}

的JavaScript

$('a.tooltip').qtip({
    content: {
        title: {
            text: function(event, api) {
                return $(api.target).attr('title');
            }
        },
        text: function(event, api) {
            return $(api.target).next('.tooltip-content');
        }
    }
});

http://jsfiddle.net/adamtsiopani/m4hohp4e/

更新

我现在明白为什么会发生这种情况 - 在第一次悬停时，.tooltip-content元素会移动到工具提示中，然后放在DOM的末尾。所以它不再是“下一个”元素......但我不明白如何解决这个问题？

Answer 1

而不是将实际的.tooltip-content DOM节点/ jQuery元素传递给qtip以获取弹出文本：

text: function(event, api) {
    return $(api.target).next('.tooltip-content');
}

你可以改为传递html：

text: function(event, api) {
    return $(api.target).next('.tooltip-content').html();
}

Fiddle

Answer 2

你可以试试这个：

$('a.tooltip').qtip({
    content: {
        title: {
            text: function(event, api) {
                return $(api.target).attr('title');
            }
        },
        text: function(event, api) {
            return $(api.target).parent().find('.tooltip-content')
        }
    }
});

fiddle

$(api.target).next('.tooltip-content');
//qtip changes DOM after you first hover on the element,
//so you have to use different selector

为什么这个qtip2在第二次点击时会显示空白内容？

2 个答案: