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

您可以为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类的元素中。）

然后您的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标签，但是你明白了。）

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

1 个答案: