tooltip - 设置工具提示的样式 (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>

我在js中的数据切换上激活了它:

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

我注意到，当工具提示出现时，会使用“tooltip ...”类创建一个新的 div，因此我认为我可以定位该类并在我的 scss 中对其进行样式设置，因此:

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

不是我想要的样式选项，只是测试了一下它的工作原理......结果是:

与我的测试背景相同的黑色背景...有人可以帮我解决这个问题吗？非常感谢。

Answer 1

工具提示的结构为described in the docs 。要更改样式，您需要覆盖 tooltip-inner 和 arrow :

Bootstrap 4.0.0 更新

Demo

.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 是所需的工具提示颜色)