一些角色打破了Bootstrap Popover

Question

我正在我的新项目中尝试使用popover，并设置了data-hmtl =＆＃39; True＆＃39;。但是，当将逗号（，）等字符添加到数据内容时。 UI仅在逗号（，）之前显示文本。

results

这里是前端的输出： 修剪输出截图

Answer 1

当它从数据库接收字符串时会发生一些有趣的事情。截图中的引号不应该根据此代码显示。

我不认为它正在治疗＆＃39; x＆＃39;作为一个字符串。您可以尝试使用

var x = "Creative Cloud for...";
var res = String(x);
$(info_icon).attr('data-content',res);

Answer 2

将$(info_icon).attr('data-html','True');替换为$(info_icon).attr('data-html',true);。你必须有一个布尔值

＆＃13;

＆＃13;

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()
})

＆＃13;

i{
  display:block;
  width:50px;
  height:50px;
  border:solid 1px red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

（显示整页以运行代码段）