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

【问题标题】：Change tooltip's content to reflect those in html tags更改工具提示的内容以反映 html 标签中的内容
【发布时间】：2019-10-16 17:20:21
【问题描述】：

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

【问题讨论】：

我将您的代码转换为可运行的 sn-p，但它没有显示任何工具提示。请添加缺少的部分（我假设一些 CSS）。
stackoverflow.com/questions/43584458/…
在 StackOverflow 上，您应该在可运行的 sn-ps 中展示您的问题，因此请不要将您的问题编辑回无法正确引用必要资产的不可运行状态。相反，添加缺失的部分。
我添加了工具提示 css 文件。整个js和css文件来自iamceege.github.io/tooltipster

标签： javascript jquery html css tooltipster

【解决方案1】：

来自tooltipster 文档 (5.)：

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

【讨论】：

好的。我希望工具提示显示不同的内容。我删除了 data-tooltip-content="#tooltip_content" 并在 $('.tooltip').tooltipster 下添加了“contentCloning: true,content:$(this)”。但不知何故 $(this) jquery 对象不起作用