如何在Bootstrap Popover的data-content中使用div并渲染HTML内容

嘿，这个问题我太熟悉了！你遇到的是Bootstrap Popover的默认行为限制——它默认会把data-content里的内容当作纯文本解析，所以<br>这类HTML标签自然不会被渲染成预期的换行效果。

下面给你两种简单靠谱的解决方法：

方法1：初始化时通过JS配置开启HTML解析 #

修改你的JS代码，在调用popover()时传入配置对象，开启html: true选项，这是最直接的处理方式：

$(document).ready(function(){
  $('[data-toggle="popover"]').popover({
    html: true // 核心配置：允许Popover解析HTML内容
  });
});

方法2：通过HTML data属性直接开启 #

如果你更习惯用HTML属性来配置，也可以给触发Popover的<a>标签加上data-html="true"属性，这样无需修改JS也能生效：

<div class="numberCircle"> 
  <a href="#" data-toggle="popover" title="Book Information" 
     data-content="Booked By : hari <br> Booked from : Bookings.com"
     data-html="true">222</a> 
</div>

小提醒 #

如果你的data-content内容来自用户输入，一定要注意XSS安全风险，确保内容经过过滤或转义，避免注入恶意代码哦！

内容的提问来源于stack exchange，提问作者Abhils