Yii2中如何实现支持HTML内容的Bootstrap3提示框？

嘿，这个问题我太熟了！Bootstrap 3的tooltip默认确实会把title里的HTML转义成纯文本，导致标签显示不出来。给你几个实用的解决思路和替代方案：

Bootstrap其实自带了支持HTML内容的配置，只是默认没开启。你只需要在初始化tooltip时设置html: true，然后把HTML内容放到data-original-title属性里（而不是原生的title），或者通过JS直接传入title内容就行。

示例代码：

HTML结构 #

<button type="button" class="btn btn-default" data-toggle="tooltip" data-original-title="<strong>加粗提示文本</strong><br>这是换行的内容">
  带HTML的提示框
</button>

JS初始化 #

$(function () {
  // 给所有带data-toggle="tooltip"的元素初始化
  $('[data-toggle="tooltip"]').tooltip({
    html: true // 关键：开启HTML渲染
  });
});

⚠️ 注意：如果你的提示内容来自用户输入，一定要做好XSS防护，避免注入恶意代码。

Popover本来就是Bootstrap用来展示更复杂内容的组件，天生支持HTML，而且可以改成和Tooltip一样的hover触发方式，用户体验几乎一致。

示例代码：

HTML结构 #

<button type="button" class="btn btn-default" data-toggle="popover" data-content="<div>自定义<strong>HTML内容</strong><p>甚至可以放段落、列表</p></div>">
  用Popover模拟Tooltip
</button>

JS初始化 #

$(function () {
  $('[data-toggle="popover"]').popover({
    html: true,
    trigger: 'hover', // 改成hover触发，和Tooltip一样
    placement: 'top', // 设置提示框位置，和Tooltip一致
    container: 'body' // 避免布局问题
  });
});

这样设置后，Popover就会在鼠标 hover 时弹出，和Tooltip的交互逻辑完全一样，但能完美渲染HTML内容。

如果不想依赖Bootstrap的组件，自己写一个纯CSS+JS的提示框也很简单，完全不碰title属性，自由度拉满。

示例代码：

HTML结构 #

<button class="custom-tooltip-btn">
  自定义HTML提示框
  <!-- 提示内容直接写在元素内部 -->
  <span class="custom-tooltip">
    <strong>自定义标题</strong>
    <ul>
      <li>支持列表项</li>
      <li>支持任意HTML</li>
    </ul>
  </span>
</button>

CSS样式 #

.custom-tooltip-btn {
  position: relative;
}
.custom-tooltip {
  display: none;
  position: absolute;
  top: -120%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  z-index: 1000;
  width: 220px;
}
/* hover时显示提示框 */
.custom-tooltip-btn:hover .custom-tooltip {
  display: block;
}

这个方案不需要任何JS（如果只需要hover触发的话），完全靠CSS控制显示隐藏，内容可以随便写HTML，想怎么布局就怎么布局。

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