Search code examples
javascriptjquerytwitter-bootstrapbootstrap-popover

Some characters break Bootstrap Popover

I am trying out popover in my new project and I have set data-hmtl='True'. However, when characters like comma (,) is added to the data-content. The UI displays text only before comma (,).

var info_icon = document.createElement('i');
$(info_icon).attr('class','fas fa-info-circle fa-xs');
$(info_icon).attr('data-toggle','popover');
$(info_icon).attr('title',title);
$(info_icon).attr('data-html','True');
$(info_icon).css('max-width','100%');  
$(info_icon).attr('data-container','body');
$(info_icon).attr('data-placement','bottom');
$(info_icon).attr('data-trigger','hover');
$(info_icon).attr('tabindex','0');

//normally we get this data from a Database
var x = "Creative Cloud for desktop is a great place to start any creative project. Quickly launch and update your desktop apps; manage and share your assets stored in Creative Cloud; download fonts from Adobe Typekit or high-quality royalty-free assets right within the app; and showcase and discover creative work on Behance. The application stays out of your way but is there when you need it, so you can focus on creativity."

$(info_icon).attr('data-content',x);

Here's the output on the front-end: Trimmed output screenshot

Trimmed output screenshot

Solution

  • Replace $(info_icon).attr('data-html','True'); by $(info_icon).attr('data-html',true); . You must have a boolean here

    var info_icon = document.createElement('i');
$(info_icon).attr('class','fas fa-info-circle fa-xs');
$(info_icon).attr('data-toggle','popover');
$(info_icon).attr('title','test');
$(info_icon).attr('data-html',true); // boolean expected
$(info_icon).css('max-width','100%');  
$(info_icon).attr('data-container','body');
$(info_icon).attr('data-placement','bottom');
$(info_icon).attr('data-trigger','hover');
$(info_icon).attr('tabindex','0');
$("#container").append($(info_icon));
//normally we get this data from a Database
var x = "Creative Cloud for desktop is a great place to start any creative project. Quickly launch and update your desktop apps; manage and share your assets stored in Creative Cloud; download fonts from Adobe Typekit or high-quality royalty-free assets right within the app; and showcase and discover creative work on Behance. The application stays out of your way but is there when you need it, so you can focus on creativity."

$(info_icon).attr('data-content',x);

$(function () {
  $('[data-toggle="popover"]').popover()
})
    i{
  display:block;
  width:50px;
  height:50px;
  border:solid 1px red;
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div id="container">

</div>

    (display full page to run snippet)