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

Question

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

javascripthtmlcsstwitter-bootstrapbootstrap-4

3

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

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

但是似乎什么都没用。有人能帮我解决这个问题吗？

我想要实现的是附加的布局。

- BillNathan

这个答案不符合您的需求吗？https://dev59.com/GWMm5IYBdhLWcg3wZ-XQ 它还有几个链接指向更多类似于您的重复问题。 - Marc

我已经尝试过这个，但它对我不起作用。如果你看到上面的代码？有什么问题吗？我认为我粘贴的上面的代码也是正确的，但它仍然无法工作。所以我在这里寻求帮助。 - BillNathan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- doğukan · Accepted Answer

将.tooltip-inner中的background: #fff !important和color: rgba(0, 0, 0, .7) !important;添加!important，保留HTML标签。

$(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;
}