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

【问题标题】：Styling a tooltip (popper.js / bootstrap v4 beta)样式化工具提示（popper.js / bootstrap v4 beta）
【发布时间】：2017-08-30 08:38:17
【问题描述】：

我已经安装了 bootstrap v4 beta 和 popper.js (tooltip.js) 库。我正在尝试使用它的工具提示功能。所以我设法让它出现，但我无法改变它的外观/风格。我已经多次查看他们的文档，但我无法弄清楚。（我只是讨厌没有示例的所谓“文档”）。所以这是我的html：

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

我在 js 中的 data-toggle 上激活了它：

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

我注意到，当工具提示出现时，会使用“tooltip ...”类创建一个新的 div，所以我认为我可以定位该类并在我的 scss 中设置它的样式，所以：

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

不是我想要的样式选项，只是经过测试才能看到它的工作原理......结果：

与我的测试背景相同的黑色背景...有人可以帮我解决这个问题吗？非常感谢。

【问题讨论】：

标签： tooltip bootstrap-4 popper.js

【解决方案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 是所需的工具提示颜色）

【讨论】：

谢谢你，这很有效，我想知道你是否能说出你是如何发现要改变的。在哪里可以找到这些信息？
我同意...通过查看这些文档，我永远不会知道 :before 位。
附注我发现我需要设置 arrow:before 但不是 .arrow 否则我的箭头是 stub-nosed ... 和 p.p.s.对于使用 Angular-4 的用户，您必须将这些 css 规则放在全局 styles.css 中，因为工具提示是在组件的 DOM 之外创建的（假设您在“组件”中创建工具提示）。
@ZimSystem 不幸的是，此更改颜色的代码不适用于 bootstrap 4.0。箭头搞砸了，我不明白为什么……codeply.com/go/IB7hqLqa2u。（我查看了 scss 文件 - github.com/twbs/bootstrap/blob/v4-dev/scss/_tooltip.scss）
在最后一条评论中有解释。从自定义 CSS 中删除 .arrow：codeply.com/go/2rMqYxkcIf

【解决方案2】：

对我来说，我不得不为底部工具提示执行此操作：

.tooltip-inner {
  background-color: $darkGrayClr;
}
.tooltip.bs-tooltip-bottom .arrow:before {
  border-bottom-color: $darkGrayClr;
}

【讨论】：