Bootstrap 工具提示箭头边框和背景颜色答案

【问题标题】：Bootstrap tooltip arrow border and background colorBootstrap 工具提示箭头边框和背景颜色
【发布时间】：2019-05-03 00:00:03
【问题描述】：

如何更改工具提示箭头的背景颜色和边框颜色？我正在使用 Bootstrap 4。

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

.tooltip-main {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-weight: 700;
  background: #f3f3f3;
  border: 1px solid #737373;
  color: #737373;
  margin: 4px 121px 0 5px;
  float: right;
  text-align: left !important;
}

.tooltip-qm {
  float: left;
  margin: -2px 0px 3px 4px;
  font-size: 12px;
}

.tooltip-inner {
  max-width: 236px !important;
  height: 76px;
  font-size: 12px;
  padding: 10px 15px 10px 20px;
  background: #FFFFFF;
  color: rgb(0, 0, 0, .7);
  border: 1px solid #737373;
  text-align: left;
}

.tooltip.show {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Hello world"><span class="tooltip-qm">?</span></div>

代码：https://www.codeply.com/go/DXTLRSDHcc

那篇文章和这篇文章的区别在于确定如何更改箭头本身的边框和背景颜色，而不是顶部提示。所有答案都表明您放置了一个边框顶部颜色来为箭头实现不同的颜色。但我想实现箭头本身的不同边框颜色+背景颜色

【问题讨论】：

请不要完全输入大写字母，真的没有理由这样做。
哦，我不知道。对此感到抱歉。

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

添加另一个伪元素来覆盖第一个伪元素，然后稍微翻译它以创建所需的视觉效果

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

.tooltip-main {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-weight: 700;
  background: #f3f3f3;
  border: 1px solid #737373;
  color: #737373;
  margin: 4px 121px 0 5px;
  float: right;
  text-align: left !important;
}

.tooltip-qm {
  float: left;
  margin: -2px 0px 3px 4px;
  font-size: 12px;
}

.tooltip-inner {
  max-width: 236px !important;
  height: 76px;
  font-size: 12px;
  padding: 10px 15px 10px 20px;
  background: #FFFFFF;
  color: rgb(0, 0, 0, .7);
  border: 2px solid red;
  text-align: left;
}

.tooltip.show {
  opacity: 1;
}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #f00!important;
  /* Red */
}

.bs-tooltip-bottom .arrow::after {
    content: "";
    position: absolute;
    bottom: 0;
    border-width: 0 .4rem .4rem;
    transform: translateY(3px);
    border-color: transparent;
    border-style: solid;
    border-bottom-color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Hello world"><span class="tooltip-qm">?</span></div>

【讨论】：

我已经添加了你的额外代码，但它似乎并没有改变任何东西。 .bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {border-bottom-color: #f00!important; /* 红色 */ } .bs-tooltip-bottom .arrow::after { content: "";位置：绝对；底部：0；边框宽度：0 .4rem .4rem；变换：translateY（3px）；边框颜色：透明；边框样式：实心；边框底部颜色：#000； }
@IbadullahKhan 然后检查您添加的 CSS 的顺序并清除缓存
我认为这段代码是用于工具提示底部的。我正在使用工具提示顶部。
您能帮我解决当前的问题吗？我通常不知道 CSS 中的这种定位。你能告诉我如何定位“顶部”吗？就像我想这是 [x-placement^=bottom] 底部。
@IbadullahKhan 你能把代码分享到“顶部”位置吗，这样我很容易帮忙吗？

【解决方案2】：

我能够让它像Temani Afif 建议的那样工作。然而，我们最终改用了弹出框，所以我们可以应用popover-box-shadow。 Bootstrap 弹出框就像工具提示一样，只是它们带有边框，因此不需要对重叠箭头大惊小怪。另外，在使用 scss 时，您只需修改 variables.scss 文件即可完成绝大多数样式设置。

要更改弹出框的背景颜色，请参阅此答案：Change bootstrap popover background color

【讨论】：