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和乔希惠特洛的摆弄，我意识到这个问题只有当主要的“工具提示容器”是一个超链接本身时才会发生。我认为将其定义为一个超链接或另一个标记(客户端可以使用键盘关注它)是有意义的，否则它就会出现可访问性问题。

Answer 1

您的问题是在锚内有一个嵌套的锚。虽然这可能是可能的，但我强烈建议删除内部锚标记，否则只有一个内部锚标记，并使容器成为一个span。

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

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/

工作场所：

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

Answer 2

随着Josh Whitlow对嵌套锚的关注，我想我找到了一个解决方案：

我们应该在“工具提示容器”之外定义"tooltip_content“吗？

以下是html代码：

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

以下是JavaScript代码：

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

下面是JSFiddle：

https://jsfiddle.net/c3ddf8bm/8/