javascript - JQuery Tooltipster 插件不在 html 内容中显示带有超链接的工具提示

Question

我按照官方文档的说明操作:

http://iamceege.github.io/tooltipster/#htmlcontentalt

一切正常。我在内容中添加的唯一额外内容是一个“a”标签，如下所示:

这是html代码:

<a class="tooltip-container">
    This div has a tooltip with HTML when you hover over it!
    <span class="tooltip_content">
      <a href="#"></a><img src="myimage.png" /> <strong>This is the content of my tooltip!</strong>
    </span>
</a>

这是 JavaScript 代码:

$('.tooltip-container').tooltipster({
  functionInit: function (instance, helper) {
    var content = $(helper.origin).find('.tooltip_content').detach();
    instance.content(content);
  }
});

这是 JSFiddle:

https://jsfiddle.net/c3ddf8bm/7/

不幸的是，工具提示什么也没显示!

注意:我在最新版本的 Chrome 和 IE 中对其进行了测试。

更新:

跟随 xorspark 和 Josh Whitlow 的 fiddle ，我意识到这个问题只发生在主要的“tooltip-container”是超链接本身时。我认为将其定义为超链接或其他标签是有意义的，客户端可以使用键盘将其聚焦，否则我认为它将存在可访问性问题。

Answer 1

你的问题是你的 anchor 中有一个嵌套的 anchor 。虽然这可能是可能的，但我强烈建议删除内部 anchor 标记，或者只有一个内部 anchor 标记并使容器成为一个 span。

如 this post 所示，即使您设法让它工作，它仍会在子 anchor 出现之前关闭父 anchor ，这很可能是导致工具提示停止工作的原因。

HTML:

<div class="tooltip_templates">
<a class="tooltip-container">
  This div has a tooltip with HTML when you hover over it!
  <span class="tooltip_content">
    <img src="myimage.png" /> <strong>This is the content of my tooltip!</strong>
  </span>
</a>

Javascript:

$(document).ready(function() {
  $('.tooltip-container').tooltipster({
    functionInit: function (instance, helper) {
      var content = $(helper.origin).find('.tooltip_content').detach();
      instance.content(content);
    }
  });
});

要包含的文件:

• https://github.com/iamceege/tooltipster

• https://developers.google.com/speed/libraries/

工作 fiddle :

https://jsfiddle.net/h6Lrvqay/1/