在 Bootstrap JS 工具提示中添加粗体文本

Question

我正在尝试向引导工具提示添加标题、内容和一些粗体文本。我发现它的唯一选项是标题，它以所有相同的格式显示文本。

对此的任何建议都非常感谢！

这是我的 HTML：

<div class='wrap'>
   <div class='wrapText'>Webinars</div>
        <div class='wrapInfo'>
            <a class="learnMore" href="#" data-toggle="tooltip" data-placement="left" title='Info goes here'><span class='glyphicon glyphicon-info-sign'></span></a>
        </div>
</div>

这是我的 jQuery：

jQuery(document).ready(function () {
    jQuery('[data-toggle="tooltip"]').tooltip(); 
});

这是我的 CSS：

.wrapText,
.wrapInfo {
    width: 50%;
    float: left;
}
.wrapInfo {
    text-align: right;
    font-size: 18px;
}

.learnMore + .tooltip > .tooltip-inner {
      background-color: #ffffff; 
      color: #000000; 
      border: 5px solid #e96f34; 
      padding: 15px;
      font-size: 16px;
      border-radius: 5px;
  }
.learnMore + .tooltip.left > .tooltip-arrow {
      border-left: 5px solid #e96f34;
  }
.wrapInfo a {
    color: #e96f34;
}
.wrapInfo a:hover {
    color: #A34E24;
}

Answer 1

您可以为引导工具提示提供自己的 HTML。如果您查看文档，您会注意到在初始化工具提示时可以提供一个 HTML 属性。

所以你可以使用类似下面的东西：

jQuery('[data-toggle="tooltip"]').tooltip({
    placement: 'left',
    title: 'Info goes here',
    html: true,
    template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="my-tooltip-header"></div><div class="my-tooltip-body tooltip-inner"></div></div>
});

（注意文档指出title 将插入到具有tooltip-inner 类的元素中。）

那么您的 HTML 也更简单了，因为您不再需要所有 data- 属性，因为这些属性已在上述配置对象中指定。所以你的 HTML 可能是：

<div class='wrap'>
    <div class='wrapText'>Webinars</div>
        <div class='wrapInfo'>
            <a class="learnMore" href="#" data-toggle="tooltip">
                <span class='glyphicon glyphicon-info-sign'></span>
            </a>
        </div>
    </div>
</div>

一旦你有了这个，你可以通过访问你分配给元素的类来使用 CSS 来设置你的工具提示模板的样式。要加粗您的标题，您可以这样做：

.my-tooltip-header {
    font-weight: bold;
}

（或者你可以在模板中添加一个em 标签，但你明白了。）