设置工具提示的样式(popper.js/bootstrap v4 beta) [英] Styling a tooltip (popper.js / bootstrap v4 beta)

问题描述

我已经安装了bootstrap v4 beta和popper.js(tooltip.js)库.我正在尝试使用它的工具提示功能.所以我设法使它出现，但是我一生都无法更改它的外观/样式.我已经看过几次他们的文档，但我不知道. (我只是讨厌没有示例的所谓文档"). 这是我的html:

I've installed bootstrap v4 beta and with it the popper.js (tooltip.js) library. I'm trying to use it's tooltip function. So I managed to make it appear but I can't change it's appearance/style for the life of me. I've looked over their documentation several times but I can't figure it out. (I just hate a so called "documentation" that doesn't have examples). So here is my html:

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

我在js中通过数据切换激活了它:

I activated it on data-toggle in js:

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

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

I noticed that when the tooltip appears a new div is created with the class "tooltip ..." so I thought I could target that class and style it in my scss, so:

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

不是我想要的样式选项，只是经过测试以查看它是否有效……结果:

Not my intended styling options, just tested to see it work...well the result:

相同的黑色背景，后面有我的测试背景...有人可以帮助我解决这个问题吗?非常感谢.

The same black background with my test background behind it...can someone help me figure this out? Many thanks.

推荐答案

工具提示的结构为

The structure of the tooltip is described in the docs. To change the style you need to override tooltip-inner and 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是所需的工具提示颜色)

(where #00cc00 is the desired tooltip color)

这篇关于设置工具提示的样式(popper.js/bootstrap v4 beta)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！