HTML 弹出窗口在 Bootstrap 4 中失败

Question

下面的代码应该创建一个 bootstrap 弹出窗口，其中包含一个名为 boomHTML 的 HTML 字符串。不幸的是，代码只能在 bootstrap 3 中正确执行。 Bootstrap 4 导致一个空的弹出窗口。如果我使用不同于 <h1></h1> 的 html 标签，也会出现这种情况。 bootstrap 以某种方式清理了输入。我还没有查看 github 回购协议。

非常感谢任何帮助

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

Answer 1

在 documentation in bootstrap for popover it says title expects either a string , element or function. Since you are passing HTML its better to pass it as an element rather than string. Passing it as an element fixes the issue.see here codepen link 或以下代码段中。

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

Answer 2

下面的代码可以解决问题将 css 中的 blue 更改为 class

在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');
  });

});

HTML 弹出窗口在 Bootstrap 4 中失败

HTML Popover fails in Bootstrap 4

javascript

jquery

popover

twitter-bootstrap

bootstrap-4