Tooltipster 已初始化，但悬停或单击时不显示

Posted 2023-05-07

【中文标题】Tooltipster 已初始化，但悬停或单击时不显示

【英文标题】：Tooltipster initializes but no display on hover or click

【发布时间】：2018-12-21 01:44:34

【问题描述】：

我已经使用 Cluetip 8 年了。被要求提供小费，并意识到它在 5 年前被放弃了。 Tooltipster 看起来像是在积极维护并且功能齐全。

我已经包含了css和js文件，加载没有错误。

我的 html 是由 xslt 进程生成的，但 html 看起来不错

<span class="handShift" data-tooltip-content="#ad1e88"> ⇉ </span>
<div class="tooltip_templates" style="display:none"><span class="tip" id="ad1e88"><span class="clueTitle">Handshift:</span><span class="clueNote">unknown</span></span></div>

<span class="handShift" data-tooltip-content="#ad1e92"> ⇉ </span>
<div class="tooltip_templates" style="display:none"><span class="tip" id="ad1e92"><span class="clueTitle">Handshift:</span><span class="clueNote">Mary Baker Eddy</span></span></div>

我的 js 初始化调用是

$('span.handShift').tooltipster(
      animation: 'fade',
     delay: 200,
     trigger: 'click',
     debug:true

  );

页面加载后，两个 span.handShift 元素已将“tooltipstered”添加到类属性中。

我正在使用 data-tooltip-content 来指定提示中的 html，但我尝试使用 title 属性得到相同的结果。

当我单击 span.handShift 中的文本时，使用 data-tooltip-content 属性标识的元素从 DOM 中消失，不显示任何提示，控制台中也没有错误。元素永远不会返回，我可以看到。显然，从 DOM 中删除跨度时正在发生一些事情，但这不是预期的吗？

我使用的是 jquery 2.1.4

【问题讨论】：

尝试了一些技巧并放弃了。我很确定插件不喜欢父 html 位于 iframe 中或父 div 具有绝对位置的事实。无论如何，我对 QTip2 进行了快速更改，它开箱即用。还内置了对关闭图标的支持，我将不得不手动滚动工具提示器。谢谢.....

【参考方案1】：

我已经测试过了，你的代码有效。

cf 我的 jsfiddle http://jsfiddle.net/xpvt214o/405260/

不要忘记包含主 JS：

 <script type="text/javascript" 
src="http://iamceege.github.io/tooltipster/dist/js/tooltipster.bundle.js"></script>