Bootstrap Popover 需要设置数据原始标题的样式

Question

在

引导程序中创建了一个具有标题（data-original-title）的弹出窗口。我怎样才能让它加粗？

<td class="setWidth concat"><div class="boldTitle"><a href="#" class="tip" rel="popover"             data-trigger="hover"  data-content="Hypercholesterolemia is a condition characterized by very high levels of cholesterol in the blood. Cholesterol is a waxy, fat-like substance that is produced in the body and obtained from foods that come from animals (particularly egg yolks, meat, poultry, fish, and dairy products). The body needs this substance to build cell membranes, make certain hormones, and produce compounds that aid in fat digestion. Too much cholesterol, however, increases a person's risk of developing heart disease." 
data-original-title="Hypercholesterolemia">
<span style="cursor:pointer;">Hypercholesterolemia</span></a></div></td>

小提琴链接 http://jsfiddle.net/DivineChef/8J5w6/1/

Answer 1

以下是实现目标的三种可能性。

1. 使用data-html=true并将标题包装在 <strong> 元素中

   <a href="#" class="tip" rel="popover"
      data-trigger="hover" data-content="Hypercholesterolemia..."
      data-original-title="<strong>Hypercholesterolemia</strong>"
      data-html="true">Hypercholesterolemia</a>
   

   具有数据属性的演示

2. 初始化标题并将其包装在 <strong> 元素中使用html: true

    $('[rel=popover]').popover({ html : true });
   

   带有弹出框参数的演示

3. 使用 CSS 更改所有弹出框标题的外观

   .popover .popover-title {
       font-weight: bold;
   }
   

   带有通用弹出框 CSS 的演示

Answer 2

另一个适用于我的项目的解决方案（Bootstrap 4.3.1）：

使用 html 标记<b></b>并放置data-html="true"属性。

参考： https://getbootstrap.com/docs/4.1/components/tooltips/