Bootstrap 4 中的 HTML Popover 失败答案

【问题标题】：HTML Popover fails in Bootstrap 4Bootstrap 4 中的 HTML Popover 失败
【发布时间】：2019-08-19 21:43:42
【问题描述】：

以下代码应该创建一个引导弹出窗口，其中包含一个名为boomHTML 的 HTML 字符串。不幸的是，代码只能在引导程序 3 中正确执行。引导程序 4 导致一个空的弹出窗口。只有当我使用与<h1></h1> 不同的 html 标签时，才会出现这种情况。不知何故，引导程序清理了输入。我还没有查看 github repo。

任何帮助都非常感谢????

$(document).ready(function () {

  $(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
  });

  
  var boomHTML = "<blue>Boooom</blue>";
    
    $('#shapes-trigger').tooltip({
    title: 'Shapes'
  }).popover({
    html : true,
    title: boomHTML,
    placement: 'top'
  }).on('show.bs.popover', function() {
    $(this).tooltip('hide');
    $('[data-toggle="tooltip"]').tooltip('disable');
  }).on('hide.bs.popover', function() {
    $('[data-toggle="tooltip"]').tooltip('enable');
  });

});

.container {
  margin-top: 100px;
}

#shapes-trigger {
  padding: 20px;
  font-family: Arial;
  font-weight: bold;
  font-size: 3em;
  color: #fff;
  background: #000;
  cursor: pointer;
}

blue {
  font-size: 3em;
  font-weight: bold;
  color: blue;
}

<!DOCTYPE html>
<html lang="en">
  <head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>

  <body>

    <div class="container">
      <span id="shapes-trigger" data-toggle="tooltip" data-html="true">Hello World</span>
    </div><!-- /.container -->

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

【问题讨论】：

标签： javascript jquery twitter-bootstrap bootstrap-4 popover

【解决方案1】：

在 bootstrap for popover 的 documentation 上，它说 title 需要一个字符串、元素或函数。由于您要传递 HTML，因此最好将其作为元素而不是字符串传递。将其作为元素传递可以解决问题。请参阅此处codepen link 或以下 sn-p。

$(document).ready(function () {

  $(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
  });

  
  var boomHTML =document.createElement("blue");
  boomHTML.innerText= "BOOOM"
  
    
    $('#shapes-trigger').tooltip({
    title: 'Shapes'
  }).popover({
    html : true,
    title: boomHTML,
    placement: 'top'
  }).on('show.bs.popover', function() {
    $(this).tooltip('hide');
    $('[data-toggle="tooltip"]').tooltip('disable');
  }).on('hide.bs.popover', function() {
    $('[data-toggle="tooltip"]').tooltip('enable');
  });

});

.container {
  margin-top: 100px;
}

#shapes-trigger {
  padding: 20px;
  font-family: Arial;
  font-weight: bold;
  font-size: 3em;
  color: #fff;
  background: #000;
  cursor: pointer;
}

blue {
  font-size: 3em;
  font-weight: bold;
  color: blue;
}

<!DOCTYPE html>
<html lang="en">
  <head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>

  <body>

    <div class="container">
      <span id="shapes-trigger" data-toggle="tooltip" data-html="true">Hello World</span>
    </div><!-- /.container -->

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

【讨论】：

【解决方案2】：

下面的代码可以解决问题将css中的蓝色改为类

在 JS 文件中使用以下代码，我更改了几行代码

$(document).ready(function () {

  $(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
  });

  var boomHTML = "<p class='blue'>Boooom</p>";
  var boomTitle = "Title";

    $('#shapes-trigger').tooltip({
    title: 'Shapes'
  }).popover({
    html : true,
    title:boomTitle, 
    content: boomHTML,
    placement: 'top'
  }).on('show.bs.popover', function() {
    $(this).tooltip('hide');
    $('[data-toggle="tooltip"]').tooltip('disable');
  }).on('hide.bs.popover', function() {
    $('[data-toggle="tooltip"]').tooltip('enable');
  });

});

【讨论】：