一些字符中断 Bootstrap 弹出框

Question

我正在我的新项目中尝试弹出窗口，我已经设置了 data-hmtl='True'。但是，当将逗号 (,) 等字符添加到数据内容时。 UI 仅在逗号 (,) 之前显示文本。

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

这是前端的输出：修剪后的输出屏幕截图

Answer 1

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

我认为它不会将 'x' 视为字符串。您可以尝试使用

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); 。你必须在这里有一个布尔值

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>

（显示整页到运行片段）

一些字符中断 Bootstrap 弹出框

Some characters break Bootstrap Popover

javascript

jquery

twitter-bootstrap

bootstrap-popover