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

JQuery Tooltipster plugin does not show the tooltip with a hyperlink in the html content

本文关键字：显示 超链接 工具提示 插件 Tooltipster html JQuery      更新时间：2023-09-26

我按照官方文件的指示:

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"本身是超链接时才会发生。我认为将其定义为一个超链接或另一个标签是有意义的，客户端可以使用键盘来关注它，否则我认为它会有可访问性问题。

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

正如在这篇文章中看到的，即使你设法让它工作，它仍然会在子锚出现之前关闭父锚，这可能是导致工具提示停止工作的原因。

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/

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

我们应该在tooltip-container之外定义"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/

相关文章：