文章/答案/技术大牛

发布

问Bootstrap 4 HTML工具提示
EN

Stack Overflow用户

提问于 2020-06-24 00:37:23

回答 2查看 60关注 0票数 0

我用Bootstrap 4+ jquery开发了一个网站。我需要html样式的工具提示，但是由于某些原因，工具提示是使用jquery text()而不是html()填充的，因此将html显示为文本。我相信我的代码是正确的，所以不确定是什么问题。下面是需要工具提示的表单元格示例。我放入一些虚拟的HTML代码，以检查它是否正常工作：

<td measureid="3454" data-toggle="tooltip" data-html="true" contenteditable="true" title="<i>3</i><b>6</b>">15</td>

按照JScode启用工具提示：

$('[data-toggle="tooltip"]').tooltip({html:true});

不幸的是，工具提示将HTML显示为文本。我使用上面的JS代码检查了Bootstrap是否真的影响了工具提示以及工具提示的外观是否发生了变化。

你知道问题出在哪里吗？

html

jquery

bootstrap-4

回答 2

Stack Overflow用户

发布于 2020-06-24 01:03:24

你是否包含了所有的脚本路径？我使用Bootstrap v4.5.0测试了您的代码，它正在工作。

$(function() {
  $('[data-toggle="tooltip"]').tooltip({
    html: true
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<table>
  <tbody>
    <td measureid="3454" data-toggle="tooltip" data-html="true" contenteditable="true" title="<i>3</i><b>6</b>">15</td>
  </tbody>
</table>

票数 0

Stack Overflow用户

发布于 2020-06-24 01:39:20

问题是JQuery UI也有一个我引用的工具提示库。这两个库发生冲突，并使用了JQuery UI。下面的答案解决了这个问题

https://stackoverflow.com/a/19247955/1035217

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62539623

复制

相似问题

问Bootstrap 4 HTML工具提示
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 4 HTML工具提示EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 4 HTML工具提示
EN