时间戳

首页 > 解决方案 > 更改工具提示的内容以反映 html 标签中的内容

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

问题描述

我有下面的代码。我想要实现的是当我将那些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>

标签： javascriptjqueryhtmlcsstooltipster

解决方案

从tooltipster文档（5.）：

重要提示：如果您有两个具有相同 data-tooltip-content 属性的工具提示（也就是说，希望两者都使用相同的 HTML 元素），请在初始化工具提示时将 contentCloning 选项设置为 true：

$('.tooltip').tooltipster({
  contentCloning: true }
);

推荐阅读