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

Question

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

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

这是我的 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

您可以为 Bootstrap 工具提示提供自己的 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 class 的元素中。）

那么您的 HTML 也更简单，因为您不再需要所有 data- 属性，因为这些属性已在上述配置 object 中指定。所以你的 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>

完成后，您可以通过访问分配给元素的 classes 使用 CSS 设置工具提示模板的样式。要加粗你的 header 你可以这样做：

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

（或者您可以只向模板添加一个 em 标签，但您明白了。）

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

Adding Bold Text in Bootstrap JS Tooltip

jquery

html

twitter-bootstrap

tooltip

jquery-tooltip