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

Question

我已经安装了bootstrap v4 beta，并使用了popper.js（tooltip.js）库。我试图使用它的工具提示功能。所以我设法让它出现，但我不能改变它的外观/风格为我的生活。我已多次查看他们的文档，但我无法弄明白。 （我只是讨厌一个所谓的＆＃34;文档＆＃34;没有例子）。 所以这是我的HTML：

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

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

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

我注意到，当工具提示出现时，会使用类＆＃34;工具提示创建一个新的div ...＆＃34;所以我认为我可以在我的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;
}