样式化提示框（popper.js / bootstrap v4 beta）

Question

我安装了Bootstrap v4 beta以及popper.js（tooltip.js）库。我试图使用它的工具提示功能。所以我设法让它出现，但我却无法改变它的外观/样式。我已经多次查看过他们的文档，但我无法弄清楚。 （我只是讨厌所谓的“文档”没有示例）。因此，这是我的html：

<span data-toggle="tooltip" data-placement="right" title="Tooltip on right">Simple Task Management</span>

我在JavaScript中的data-toggle上激活了它：

$(function() {
    $('[data-toggle="tooltip"]').tooltip()
})

我注意到当工具提示出现时，会创建一个带有“tooltip…”类的新div，因此我认为我可以针对该类并在我的scss中进行样式设置，如下：

.tooltip {
    background-color: #DB2828;
    color: $green;  
}

这不是我预期的样式选项，只是测试它是否起作用...好吧，结果是：

与我的测试背景一样是黑色的背景...有人能帮我解决这个问题吗？非常感谢。

- Alin Faur

Answer 1

工具提示的结构可以在文档中了解。要更改样式，您需要覆盖tooltip-inner而不是 arrow：

Bootstrap 4.0.0更新

演示

.tooltip-inner {
    background-color: #00cc00;
}
.tooltip.bs-tooltip-right .arrow:before {
    border-right-color: #00cc00 !important;
}
.tooltip.bs-tooltip-left .arrow:before {
    border-left-color: #00cc00 !important;
}
.tooltip.bs-tooltip-bottom .arrow:before {
    border-bottom-color: #00cc00 !important;
}
.tooltip.bs-tooltip-top .arrow:before {
    border-top-color: #00cc00 !important;
}

(其中#00cc00是所需的工具提示颜色)

- Zim

---

谢谢，那个方法起作用了。我想知道你是如何找到需要改变的内容的。在哪里可以找到这些信息？ - Alin Faur

我同意...如果只看那些文档，我永远不会知道:before的用法。 - user292701

我发现需要设置arrow:before而不是.arrow，否则箭头会变成钝头。另外，如果你正在使用Angular-4，你需要将这些CSS规则放在全局styles.css中，因为工具提示是在组件的DOM之外创建的（假设你正在一个“组件”中创建工具提示）。 - user292701

@ZimSystem 不幸的是，这段代码无法在Bootstrap 4.0中更改颜色。箭头完全混乱，我不明白为什么...https://www.codeply.com/go/IB7hqLqa2u。(我已经查看了scss文件-https://github.com/twbs/bootstrap/blob/v4-dev/scss/_tooltip.scss) - nunomira

请参考最后一条评论。从自定义CSS中删除.arrow：https://www.codeply.com/go/2rMqYxkcIf - Carol Skelly

我需要在第一个类元素中使用!important。 - ChesuCR

Answer 2

对于我来说，我不得不这样做，而不是使用底部工具提示：

.tooltip-inner {
  background-color: $darkGrayClr;
}
.tooltip.bs-tooltip-bottom .arrow:before {
  border-bottom-color: $darkGrayClr;
}

- Symro