样式化工具提示(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

工具提示的结构在文档中描述.要改变你需要重写的风格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所需的工具提示颜色在哪里)