Styling the Arrow on Bootstrap Tooltips

$('.btn').tooltip({
  boundary: 'window'
})

button.btn {
  margin: 1em;
}

.tooltip-inner {
  margin-left: 40px;
}

.tooltip-inner:before {
  content: "";
  position: absolute;
  background: black;
  height: 1px;
  width: 40px;
  left: 5px;
  top: 14px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js" integrity="sha384-BOsAfwzjNJHrJ8cZidOg56tcQWfp6y72vEJ8xQ9w6Quywb24iOsW913URv1IS4GD" crossorigin="anonymous"></script>

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>

Bootstrap tooltips arrow color

Change the border-color: red; to border-right-color: red;

Bootstrap 4 change tooltip arrow color

The selector you are looking for is .tooltip.bs-tether-element-attached-left .tooltip-inner::before:

.tooltip.bs-tether-element-attached-left .tooltip-inner::before {
    border-right-color: red;
}

If you want every tooltip arrow red - jsfiddle:

.tooltip.bs-tether-element-attached-bottom .tooltip-inner::before {
    border-top-color: red;
}

.tooltip.bs-tether-element-attached-top .tooltip-inner::before {
    border-bottom-color: red;
}

.tooltip.bs-tether-element-attached-left .tooltip-inner::before {
    border-right-color: red;
}

.tooltip.bs-tether-element-attached-right .tooltip-inner::before {
    border-left-color: red;
}

How can we change the color of arrow in the popover of bootstrap?

Use this css changing border-right color of pseudo element:

.popover.right .arrow:after {
  border-right-color: red;
}

#DEMO

can't change the CSS of the bootstrap tooltip arrow

Adding the CSS to class .tooltip.top .tooltip-arrow will resolve the issue, as shown in the below-working snippet.

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
.example-tooltip .tooltip {  position: relative;  display: inline-block;  margin: 10px 20px;  opacity: 1;}.tooltip-inner {  max-width: 200px;  padding: 3px 8px;  color: #fff;  text-align: center;  background-color: gray;  border-radius: 4px;}.tooltip.top .tooltip-arrow {  bottom: 0;  left: 50%;  margin-left: -5px;  border-width: 5px 5px 0;  border-top-color: gray;}

<div class="example-tooltip">  <div class="tooltip top" role="tooltip">    <div class="tooltip-arrow"></div>    <div class="tooltip-inner"> Tooltip on the top </div>  </div></div>

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

body .tooltip-inner {  background: rgb(151, 151, 151);  color: black;}body .tooltip .arrow::before {  border-bottom-color: rgb(151, 151, 151);}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><div id="container">  <h1 data-toggle="tooltip" title="example">MENU LUX</h1></div>

<a href="#" data-toggle="tooltip" data-placement="bottom"
   title="" data-original-title="Tooltip on bottom"
   class="red-tooltip">Tooltip on bottom</a>

.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}

.red-tooltip + .tooltip.top > .tooltip-arrow {background-color: #f00;}

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

$(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: rgba(0, 0, 0, .7);
  border: 1px solid #737373;
  text-align: left;
}

.tooltip.show {
  opacity: 1;
}

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

<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>
<style>
  .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
  .bs-tooltip-bottom .arrow::before {
    border-bottom-color: #f00;
    /* Red */
  }
</style>