WordPress - 如何使用 Bootstrap 4.5 在工具提示中添加 HTML？

Posted 2023-03-21

【中文标题】WordPress - 如何使用 Bootstrap 4.5 在工具提示中添加 HTML？

【英文标题】：WordPress - How to add HTML in a tooltip with Bootstrap 4.5?

【发布时间】：2021-12-30 21:52:40

【问题描述】：

在网上浏览了相当多的主题后，我直接来问，因为我没有找到我的问题的答案。

在 WordPress 上，我尝试在链接的工具提示中嵌入 html 图像，但我页面的整个 HTML 代码中断。

在我的head 中，我有以下 JS 脚本来激活工具提示：

<script>
    $(function () 
        $('[data-toggle="tooltip"]').tooltip(
            html: true
        )
    )
</script>

在我的 WordPress 页面中，我有以下 HTML 代码：

<li><a href="/jeux/tr1/solution/item1/" data-toggle="tooltip" title="<img src='/img/jeux/tr1/solution/001.png' alt=''>">Item 1</a></li>
<li><a href="/jeux/tr1/solution/item2/">Item 2</a></li>
<li><a href="/jeux/tr1/solution/item3/">Item 3</a></li>

这就是我得到的：

第一个li的代码末尾没有被解释，浏览器（在本例中为Firefox）直接在工具提示中显示Item 2和错误的Item 1。

你可以直接看这里：https://www.tombraidercie.com/public-playground/

你有什么想法吗？

【参考方案1】：

您只需要启用"data-html=true"吗？

这是来自当前项目：

<button type="button" class="classes" data-toggle="popover" title="Title" data-content="Content <a href='#'>> Link</a>" data-html="true"></button>

【讨论】：

不，很遗憾，它没有帮助。 :( data-title 属性之后的所有内容都没有被解释并出现在屏幕上：i.imgur.com/WISLUUZ.png 你当前的项目是在 WordPress 上吗？我认为 WordPress 有问题。

在这里发送您的代码

您可以在这里查看：tombraidercie.com/public-playground - 将鼠标移到“子项 B”上以查看意外行为。感谢您的帮助！

【参考方案2】：

好的，我终于找到答案了！

Wordpress 中有一个本机函数 (wptexturize)，可将某些字符转换为“智能”字符。还有一句 in their doc 解释了“跳过某些 HTML 块中的代码”。

因此，如果您有一个 Wordpress 网站并希望在工具提示中嵌入 HTML 代码，请通过将此行添加到主题的 functions.php 文件中来删除此原生函数。

remove_filter('the_content', 'wptexturize');