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

2019年7月28日 205次阅读

我按照官方文件的说明进行了操作：

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的小提琴之后,我意识到这个问题只发生在主要的“tooltip-container”本身就是一个超链接.我认为将它定义为超链接或客户端可以使用键盘关注它的另一个标记是有意义的,否则我认为它将具有可访问性问题.

最佳答案 您的问题是您的锚中有一个嵌套锚.虽然这可能是可能的,但我强烈建议删除内部锚标记,否则只有内部锚标记并使容器成为跨度.

如在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/

点赞