【问题标题】:Bootstrap 4 html tooltip is removing inline stylesBootstrap 4 html 工具提示正在删除内联样式
【发布时间】:2019-10-30 17:10:47
【问题描述】:

我正在使用以下代码初始化工具提示:

$('.tooltip').each(function () {
    $(this).tooltip({
      html: true,
      title: $('#' + $(this).data('tip')).html()
    });
});

工具提示代码示例:

<div class="tooltip">
 <div class="inner">
  <div class="tooltip__content">
   <ul>
    <li>
     <div class="rating">
      <div class="level" style="width: 85%;" data-width="85"></div>
     </div>
    </li>
   </ul>
  </div>
 </div>
</div>

我的问题是工具提示完全忽略了我的内联 css/数据样式,例如

<div class="level" style="width: 85%;" data-width="85"></div>

呈现为

<div class="level">

是否有禁用引导工具提示删除内联样式的解决方案?

【问题讨论】:

  • 我想 Bootstrap 团队希望尽量减少渲染工具提示的复杂性。有什么理由不能改用 CSS 类?
  • @isherwood 谢谢! sanitize: false 使这个工作:) 非常感谢没有使用许多 css 类,因为这个工具提示内容在整个站点中有所不同:)
  • 很高兴听到。请务必接受您的回答。

标签: twitter-bootstrap bootstrap-4 tooltip popper.js


【解决方案1】:

设置参数 santize: false 已解决问题:

$('.tooltip').each(function () {
  $(this).tooltip({
    html: true,
    sanitize: false,
    title: $('#' + $(this).data('tip')).html()
  });
});

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-02-13
    • 2019-06-13
    • 1970-01-01
    相关资源
    最近更新 更多