样式化工具提示 (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 中的 data-toggle 上激活了它:
I activated it on data-toggle in js:
$(function() {
$('[data-toggle="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.
推荐答案
tooltip 的结构是 在文档中描述.要更改样式,您需要覆盖 tooltip-inner
和 :arrow
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屋!