如何在Bootstrap 4中更改工具提示箭头的颜色？

Question

我正在尝试更改工具提示的箭头颜色。我正在使用Bootstrap4。当前使用的代码是：

HTML：

<div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Service fee helps Driveoo run the platform and provide dedicated customer support"><span class="tooltip-qm">?</span></div>

JS：

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

CSS：

/* TOOLTIP */
.tooltip-main {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-weight: 700;
  border: 1px solid #737373;
  color: #737373;
  float: left;
  margin: 4px 0px 0px 5px;
  cursor: pointer;
}
.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);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  text-align: left;
}
[data-placement="top"] + .tooltip > .tooltip-arrow {
  border-top-color: #FFF !important;
}
[data-placement="right"] + .tooltip > .tooltip-arrow {
  border-right-color: #8447cf;
}
[data-placement="bottom"] + .tooltip > .tooltip-arrow {
  border-bottom-color: #8447cf;
}
[data-placement="left"] + .tooltip > .tooltip-arrow {
  border-left-color: #8447cf;
}

我尝试使用

.tooltip-inner

我也尝试过

[data-placement="top"] + .tooltip > .tooltip-arrow

但是似乎没有任何效果。有人可以帮我解决这个问题吗？

我要实现的是附件布局

Answer 1

将!important添加到background: #fff !important中的color: rgba(0, 0, 0, .7) !important;和.tooltip-inner

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

/* TOOLTIP */
.tooltip-main {
width: 15px;
height: 15px;
border-radius: 50%;
font-weight: 700;
border: 1px solid #737373;
color: #737373;
float: left;
margin: 4px 0px 0px 5px;
cursor: pointer;
}

.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: #fff !important;
color: rgba(0, 0, 0, .7) !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
text-align: left;
}

/* for arrow color */
.arrow::before{
  border-bottom-color:red!important
}

[data-placement="top"] + .tooltip > .tooltip-arrow {
border-top-color: #FFF !important;
}

[data-placement="right"] + .tooltip > .tooltip-arrow {
border-right-color: #8447cf;
}

[data-placement="bottom"] + .tooltip > .tooltip-arrow {
border-bottom-color: #8447cf;
}

[data-placement="left"] + .tooltip > .tooltip-arrow {
border-left-color: #8447cf;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Service fee helps Driveoo run the platform and provide dedicated customer support"><span class="tooltip-qm">?</span></div>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

而且，对于箭头颜色

.arrow::before{
  border-bottom-color:red !important;
}