CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapbootstrap-4popover
Philipp Braun
Philipp Braun

Reputation: 1573

HTML Popover fails in Bootstrap 4

The following code is supposed to create a bootstrap popover that contains an HTML string called boomHTML. Unfortunately, the code only executes properly in bootstrap 3. Bootstrap 4 leads to an empty popover. This is also only the case if I use html tags different from <h1></h1>. Somehow, bootstrap sanitizes the input. I have not yet looked into the github repo.

Any help is highly appreciated 🙏 

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

Upvotes: 2

Views: 1546

Answers (2)

Gozbeth Stanslaus
Gozbeth Stanslaus

Reputation: 121

Below code will do the trick Change the blue in the css to be a class

In the JS file use the following code i have change few lines of codes

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

});

Upvotes: 0

Dasith
Dasith

Reputation: 1095

On the 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 or below snippet.

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

Upvotes: 2

Related Questions