本文介绍了设置工具提示的样式(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.

推荐答案

工具提示的结构为文档中中所述.要更改样式,您需要覆盖tooltip-inner :

The structure of the tooltip is described in the docs. To change the style you need to override tooltip-inner :

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)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-18 00:02
查看更多