Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 4 change tooltip arrow color

I want to change the tooltip arrow color to red. I've googled about for an hour and the snippets that I found did not work.

My last attempt was:

.tooltip-arrow {
  border-right-color: red;
  border-left-color: red;
  border-bottom-color: red;
  border-top-color: red;
}

The tooltip is positioned right, poiting left.

like image 390
Diego Alves Avatar asked Jul 06 '17 17:07

Diego Alves


People also ask

How do I change the tooltip arrow color in bootstrap?

You can add different Bootstrap 5 tooltip directions by changing top , right , left , bottom in the data-bs-palcement . By aiming . tooltip-inner and . tooltip-arrow::before , you can change the color.

How do I change the tooltip style?

The tooltip is automatically generated by web browsers, it actually can not be removed or changed. To change the tooltip style, we need to add a tooltip text to a different attribute, for example data-title , then use CSS code to create and customise the style.

What is ngbTooltip?

ngbTooltip. The string content or a TemplateRef for the content to be displayed in the tooltip. If the content if falsy, the tooltip won't open. Type: string | TemplateRef<any> openDelay.


5 Answers

In bootstrap 4.1 you can use:

.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
    border-bottom-color: red !important;
}
.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
    border-top-color: red !important;
}
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
    border-left-color: red !important;
}
.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {
    border-right-color: red !important;
}
like image 171
Raul Avatar answered Oct 19 '22 19:10

Raul


For Bootstrap 4.3.1

Add to HTML File

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

Add to CSS File

.tooltip-inner {
    background-color: red;
    color: #444;
    width: auto;
    max-width: 150px;
    font-size: 100%;
    white-space: nowrap;
}

.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
    border-top-color: red;
}
.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {
    border-right-color: red;
}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
    border-bottom-color: red;
}
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
    border-left-color: red;
}

Add to Javascript file

$(document).ready(function () {
    $('.btn').tooltip();
});
like image 28
P P Avatar answered Oct 19 '22 19:10

P P


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;
}
like image 43
tmg Avatar answered Oct 19 '22 21:10

tmg


I am using bootstrap 4.0.0-beta.2. and this code worked for me.

.tooltip.bs-tooltip-bottom .tooltip-inner {
    background:#444 !important;
}

.tooltip .arrow:before {
 border-bottom-color:#444 !important;
 border-top-color:#444 !important;
 }
like image 4
kapil Avatar answered Oct 19 '22 19:10

kapil


Bootstrap 4.0.0 & Popper.js

Left arrow tooltip:

.tooltip .tooltip-inner {
  background-color: green;
}

.tooltip .arrow::before {
  border-left-color: green;
}

Just add in to your CSS.

like image 3
Alex Glinsky Avatar answered Oct 19 '22 20:10

Alex Glinsky