qTip：元素可见时显示工具提示

Question

我在网页上的一个元素上附加了一个qTip工具提示，该元素父级

是隐藏的（display:none）。我想在父级变为可见时（display:block），自动显示工具提示。这是否可能？

示例HTML：

<div id="parent" style="display: none;">
    <div id="child">Child Element</div>
</div>

JS：

$("#child").qtip();

我尝试使用ready选项来自动触发提示框：

$("#child").qtip({
    ready: true
});

但是这会导致工具提示立即出现，即使父级 <div> 被隐藏。

qTip 还提供了一个 when 选项，您可以在特定事件发生时显示工具提示，但这仅接受内置的 jQuery 事件。我找不到一种方法来定义自己的函数并在父级 <div> 的 display 值为 block 时显示工具提示。

- daGUY

Answer 1

你可以使用自定义事件，

$("#child").qtip({
    show: { when: { target: $("#child").parent(), event: "showevent" } }
});

$("#parent").show().trigger("showevent");

http://craigsworks.com/projects/qtip/docs/reference/

- Kevin B

---

我使用了这个变量来展示不同的 qtips，以显示有效和无效的输入。 - PJ Brunet

Answer 2

看起来你可能需要在触发父元素显示的地方（无论你是如何做到的），简单地触发qtip()。

$('#whatever').on('click', function () { // just as an example
    $('#parent').show();
    $('#child').qtip();
});

- Mark Pieszak - Trilon.io