Custom CSS For Bootstrap Tooltip

Arrow position & tooltip color change

by VENKATA VINAY BYSANI

HTML

<br/><br/><br/>

<a href="#" data-toggle="tooltip" data-placement="bottom"
       title="" data-original-title="Tooltip on bottom"
       class="custom-tooltip">Tooltip on bottom</a>
<span style="padding-left:10px;padding-right:10px"> || </span>
<a href="#" data-toggle="tooltip" data-placement="top"
       title="" data-original-title="Tooltip on Top"
       class="custom-tooltip">Tooltip on Top</a>
<span style="padding-left:10px;padding-right:10px"> || </span>
<a href="#" data-toggle="tooltip"
       title="" data-original-title="Tooltip on Top"
       class="">Default Tooltip</a>

CSS

.custom-tooltip + .tooltip > .tooltip-inner {background-color: gray;}

.custom-tooltip +.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 10%;
  margin-left: -5px;
  border-bottom-color: #000000; /* black */
  border-width: 5px 5px 0px;
}

.custom-tooltip + .tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 10%;
  margin-left: -5px;
  border-bottom-color: #000000; /* black */
  border-width: 0px 5px 5px;
}

JavaScript

$(document).ready(function(){
    $("a").tooltip();
});