Question

我有下面的代码。我想要实现的是悬停在h1和p上。内容正确且动态地输出到tooltip（h1->这是标题，p->这是段落）。现在tooltip的输出已固定为span(id = "tooltip_content")

$(document).ready(function() {
  $('.tooltip').tooltipster();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/themes/tooltipster-light.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.min.js"></script>
<h1 class="tooltip" data-tooltip-content="#tooltip_content">This is a Heading</h1>
<p class="tooltip" data-tooltip-content="#tooltip_content">This is a paragraph.</p>


<div style="display:none" class="tooltip_templates">
  <span id="tooltip_content">
       <strong>This is the content of my tooltip!</strong>
    </span>
</div>

Answer 1

摘自tooltipster文档（5。）：

重要提示：如果您有两个相同的工具提示 data-tooltip-content属性（也就是说，都希望同时使用相同的HTML元素），请在以下情况下将contentCloning选项设置为true 您初始化工具提示：
$('.tooltip').tooltipster({
  contentCloning: true }
);

更改工具提示的内容以反映html标签中的内容

1 个答案: