Question

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

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<p id="demo"></p>

<script>

//causes error in html. Required for node.
// var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;

var HttpClient = function() {
    this.get = function(aUrl, aCallback) {
              var anHttpRequest = new XMLHttpRequest();
                anHttpRequest.onreadystatechange = function() { 
                if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
                   aCallback(anHttpRequest.responseText);
                }

            anHttpRequest.open( "GET", aUrl, true );            
              anHttpRequest.send( null );
        }
}

var theURL = 'https://XXXXXX..';
var client = new HttpClient();
let thisReply = null;
client.get(theURL, function(response) {
//   var response1 = JSON.parse(response);
    // alert(response1);
    // console.log(response);
    document.getElementById('demo').innerHTML = response;
});

</script>
</body>
</html>

工具提示代码示例：

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

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

<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>

呈现为

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

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

Answer 1

设置参数 santize：false 已解决的问题：

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

Bootstrap 4 HTML工具提示正在删除内联样式

1 个答案: