How to change tooltip arrow color in Bootstrap 4?

Question

I'm trying to change the arrow color of the tooltip. I'm using Bootstrap 4. The current code I have:

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

I have tried using

.tooltip-inner

I have also tried

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

But nothing seems to be working. Can anyone help me please with this issue?

What I want to achieve is the attached layout

Does this answer not serve your needs? https://stackoverflow.com/questions/17642447/change-bootstrap-tooltip-color It also has several links to more duplicate questions like yours. — Marc, Feb 10 '19 at 14:49
I've tried this but it doesn't work with me. If you see the code above? Is there something wrong in it? I think the above I've pasted is also correct but it still won't work. So I'm here for some help. — BillNathan, Feb 10 '19 at 14:52

doğukan · Answer 1 · 2019-02-10T15:01:05.450

add !important to background: #fff !important and color: rgba(0, 0, 0, .7) !important; in .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>

And, for arrow color

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

It seems like I have achieved this. How do I add shadow to the arrow? — BillNathan, Feb 10 '19 at 15:06
impossible for this. from the beginning can be done by writing custom css. — doğukan, Feb 10 '19 at 15:14

How to change tooltip arrow color in Bootstrap 4?

1 Answers1