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

Question

我已经安装了 bootstrap v4 beta 和 popper.js (tooltip.js) 库。我正在尝试使用它的工具提示功能。所以我设法让它出现，但我无法改变它的 appearance/style 我的生活。我已经多次查看了他们的文档，但我无法弄清楚。（我只是讨厌没有示例的所谓 "documentation"）。所以这是我的 html:

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

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

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

我注意到当工具提示出现时，一个新的 div 是用 class "tooltip ..." 创建的，所以我想我可以定位 class 并在我的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 是所需的工具提示颜色）

Answer 2

对我来说，我不得不为底部的工具提示做这个：

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

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

Styling a tooltip (popper.js / bootstrap v4 beta)

tooltip

bootstrap-4

popper.js