Javascript Tooltipster:[数据工具提示内容]作为指向动态HTML的指针

​

问题：使用Tooltipster.JS与FullCalendar和/或动态呈现内容

我已经挠头和咀嚼了好长一段时间了，我还没有接近我开始时的状态。我已经阅读并重新阅读了Tooltipster文档，但似乎无法使用

'data-tooltip-content'

作为指向

#idTooltipsterElement

的指针。它只显示“数据工具提示内容”的值，即使文档明确说明：

​

Tooltipster文档说明：

5。在工具提示中使用HTML

Tooltipster允许您在工具提示中使用任何HTML标记。信息技术 这意味着您可以插入图像和文本格式标记之类的内容

使用数据工具提示内容属性而不是标题属性 提供与页面的HTML元素相对应的选择器 应该将其用作内容。这是您的HTML：

<span class="tooltip" data-tooltip-content="#tooltip_content">This span has a tooltip with HTML when you hover over it!</span>

<div class="tooltip_templates">
    <span id="tooltip_content">
        <img src="myimage.png" /> <strong>This is the content of my tooltip!</strong>
    </span>
</div>

当您将鼠标悬停在该跨距上时，它会有一个带有HTML的工具提示！
这是我的工具提示的内容

在CSS文件中，添加

.tooltip_模板{display:none；}

，以便 内容不会显示在工具提示之外

​

当我们从Tippy.js迁移到Tooltipster.js时，我遇到了Tootipster中没有的其他问题，但我发现前者的设置要容易得多，尽管它的功能和文档数量远不及后者

然而：我以前只是使用

'data-tooltip-content'

将我的整个HTML元素放在其中，奇怪的是，我注意到这也适用于Tooltipster，尽管他们的文档似乎更喜欢上述方法。现在，通常我只会保留我已经熟悉的旧方法，但不幸的是，这带来了一系列与FullCalendar中事件后渲染更改（我们可能会实施）相关的潜在挑战，我们在页面上广泛使用这些更改，以及我已经经历过的格式化困难

​

我有理由肯定，Tooltipster文档中描述的首选解决方案非常适合我们的实施，但我无法确定如何使其在fullCalendar环境中工作，该环境在以下程序流程中被分解：

eventRender：从事件源中提取事件并进行渲染 所选月份/期间的每个条目。这就是最初的 Toolstipster将被创建并分配一个唯一的id

eventAfterAllRender：这基本上是在 eventRender，这是我们进行后期渲染整理的地方，例如。 检查是否存在无效的图像链接等，并替换或删除任何图像 图标/参考，以及更改或禁用/删除工具提示（如果需要） 不再需要了。如果需要，我们将在此处替换工具提示内容 否则，我们将Tooltipster内容设置为传递的任何数据 从eventRender过程开始

eventMouseover：此部分包含事件悬停方法 它负责显示Tooltipster工具提示

我使用代码的分条版本和几个测试事件（而不是使用外部数据源）创建了一个示例fiddle，但在我们自己的环境中使用此代码时，结果是一样的。为了反映我们的环境，我加入了以下内容：bootstrap4.4.0-fullcalendar3.10.1-Tooltipster 4.2.7

如果将鼠标悬停在其中一个事件上，工具提示仅显示节指针的值，例如

#tt_event1

（它指向的元素的id），而不是内容节中设置的值

e、 g.

编写更清晰代码的提示
可在此处选择描述文本

$（文档）.ready（函数（）{
$（“#日历”）.fullCalendar({
defaultView:'月份'，
标题：“”，
默认日期：“2020-03-01”，
活动：[{
id:'事件1'，
类名：“英国”，
标题：“编写更简洁代码的技巧”，
描述：“我决定写一篇文章，这篇文章将有助于初学者理解他们的错误并总结一些实践。/n来源：hackernoon.com/tips-for-writing-cleaner-better-code-e36ffeb5526'，
开始：“2020-03-02”，结束：“2020-03-02”
}, {
id:'事件2'，
类名：“NL”，
标题：“带有箭头函数的Javascript的现代风格”，
描述：“Javascript中箭头函数的完整解释，以及它如何帮助开发人员编写灵活一致的代码。/n来源：hackernoon.com/modern-style-of-Javascript-with-Arrow-functions-lg1x3474”，
开始时间：'2020-03-04'，结束时间：'2020-03-11'
}
],
eventRender:函数（事件、元素、视图）{
window.dataE=window.dataE | |[]；
元素属性（'id'，event.id）；
var/*var*/
desc=（event.description），url=“”，
urlEvent1=”https://hackernoon.com/hn-images/1*cmqZiJz1TuUedRoeI3g_Iw.jpeg“，
urlEvent2=”https://images.unsplash.com/photo-1527427337751-fdca2f128ce5?ixlib=rb-1.2.1&q=80&fm=jpg&crop=熵&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0“，
tipRef=“tip\u content”+event.id，idTip=“#”+tipRef
/*末端变量*/；
//手动传递2个额外的图像参数-通常来自单独的数据例程
if（event.title==“编写更干净代码的提示”）{url=urlEvent1；}else{u
eventRender

Triggered while an event is being rendered. A hook for modifying its DOM.

    function( event, element, view ) { }

event is the Event Object that is attempting to be rendered.

element is a newly created jQuery element that will be used for rendering.