HTML Popover не работает в Bootstrap 4 - PullRequest
Новая
       42

HTML Popover не работает в Bootstrap 4

2 голосов
/ 29 марта 2019

Следующий код должен создать загрузочный всплывающий элемент, содержащий строку HTML с именем boomHTML.К сожалению, код выполняется только в начальной загрузке 3. Bootstrap 4 приводит к пустому поповеру.Это также только в том случае, если я использую HTML-теги, отличные от <h1></h1>.Каким-то образом, загрузчик дезинфицирует ввод.Я еще не заглядывал в репозиторий 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>

Ответы [ 2 ]

2 голосов
/ 29 марта 2019

В документации в начальной загрузке для popover говорится, что title ожидает либо строку, элемент или функцию.Поскольку вы передаете HTML, лучше передавать его как элемент, а не как строку.Передача его в качестве элемента устраняет проблему. См. Здесь кодовая ссылка или ниже фрагмент. 

$(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>
1 голос
/ 29 марта 2019

Приведенный ниже код поможет. Измените синий в 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');
  });

});
...