Re-color Tooltip in Bootstrap 4
As of Bootstrap 4.0
CSS for tooltip recoloring is handled by the .tooltip-inner
class as you noticed:
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: #fff;
text-align: center;
background-color: #000;
border-radius: .25rem;
}
Css for top arrow:
.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
margin-left: -3px;
content: "";
border-width: 5px 5px 0;
border-top-color: #000;
}
Css for right arrow:
.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before {
margin-top: -3px;
content: "";
border-width: 5px 5px 5px 0;
border-right-color: #000;
}
Css for bottom arrow:
.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before {
margin-left: -3px;
content: "";
border-width: 0 5px 5px;
border-bottom-color: #000;
}
Css for left arrow:
.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip.bs-tooltip-left .arrow::before {
right: 0;
margin-top: -3px;
content: "";
border-width: 5px 0 5px 5px;
border-left-color: #000;
}
Change Bootstrap tooltip color
You can use this way:
<a href="#" data-toggle="tooltip" data-placement="bottom"
title="" data-original-title="Tooltip on bottom"
class="red-tooltip">Tooltip on bottom</a>
And in the CSS:
.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
jsFiddle
Moeen MH: With the most recent version of bootstrap, you may need to do this in order to get rid of black arrow:
.red-tooltip + .tooltip.top > .tooltip-arrow {background-color: #f00;}
Use this for Bootstrap 4:
.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
border-bottom-color: #f00; /* Red */
}
Full Snippet:
$(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>
Bootstrap 4 change tooltip color for a specific element
In this case, you are using +
selector, that will select the adjacent sibling. If you change it to ~
selector, it will select any next sibling, not only the next one (adjacent). Even so, it may not work for you. It depends on how your HTML code is structured and how complex it is.
It is recommended for you to check how CSS selectors work.
I think a better solution for you would to change the container of each tooltip. The default container is body
, that's why it is being redenred there. Just add data-container
attribute on each icon element:
<i
class="far fa-check-circle alert-success"
data-toggle="tooltip"
data-original-title="Text"
data-container=".alert-success">
</i>
<i
class="far fa-check-circle alert-danger"
data-toggle="tooltip"
data-original-title="Text"
data-container=".alert-danger">
</i>
Like this, the tooltips will be rendered inside each icon element instead of the body.
So, you just have do adjust the CSS according to your need.
Now it's easier to select the tooltip.
.danger-tooltip .tooltip .tooltip-inner {
background-color: red;
}
.success-tooltip .tooltip .tooltip-inner {
background-color: green;
}
.danger-tooltip .tooltip .arrow::before{
border-top-color: red;
}
.success-tooltip .tooltip .arrow::before{
border-top-color: green;
}
If you need more specificity, you can give a new class name for each icon element and use it as a container for the tooltip as well.
Correct way to customize a Bootstrap 4 tooltip width, color & arrow?
The issue with your CSS is that it's not specific enough to override the default styling.
To do this you can use a selector of a higher specificity than the default Bootstrap styling; note the addition of body
to the selectors below.
$(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>
Changing color of Bootstrap tooltip
The problem is in your +
selector -- remember, that's the adjacent sibling combinator, meaning that the target needs to come immediately after the element you're referencing. This is not the case with the Bootstrap tooltip; it gets injected at the bottom of the DOM.
It is still a sibling in this particular example, so you can target it with the general sibling combinator (~)
, simply replacing your +
with ~
(tilde):
$(document).ready(function() { $('[data-toggle="tooltip"]').tooltip()});
.tooltip-primary~.tooltip>.tooltip-inner { background-color: blue;}
.tooltip-primary~.tooltip>.tooltip-arrow { border-bottom-color: blue;}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom" class="tooltip-primary">Tooltip on bottom</a>
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 to style tooltip of bootstrap 4
Check out the below example with different styles:
HTML:
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Default">Default</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-type="primary" title="Primary">Primary</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-type="info" title="Info">Info</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-type="success" title="Success">Success</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-type="warning" title="Warning">Warning</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-type="danger" title="Danger">Danger</button>
CSS:
.tooltip.primary .tooltip-inner { background-color: #337ab7; }
.tooltip.primary.top > .tooltip-arrow { border-top-color: #337ab7; }
.tooltip.primary.right > .tooltip-arrow { border-right-color: #337ab7; }
.tooltip.primary.bottom > .tooltip-arrow { border-bottom-color: #337ab7; }
.tooltip.primary.left > .tooltip-arrow { border-left-color: #337ab7; }
.tooltip.info .tooltip-inner { background-color: #31b0d5; }
.tooltip.info.top > .tooltip-arrow { border-top-color: #31b0d5; }
.tooltip.info.right > .tooltip-arrow { border-right-color: #31b0d5; }
.tooltip.info.bottom > .tooltip-arrow { border-bottom-color: #31b0d5; }
.tooltip.info.left > .tooltip-arrow { border-left-color: #31b0d5; }
.tooltip.success .tooltip-inner { background-color: #449d44; }
.tooltip.success.top > .tooltip-arrow { border-top-color: #449d44; }
.tooltip.success.right > .tooltip-arrow { border-right-color: #449d44; }
.tooltip.success.bottom > .tooltip-arrow { border-bottom-color: #449d44; }
.tooltip.success.left > .tooltip-arrow { border-left-color: #449d44; }
.tooltip.warning .tooltip-inner { background-color: #ec971f; }
.tooltip.warning.top > .tooltip-arrow { border-top-color: #ec971f; }
.tooltip.warning.right > .tooltip-arrow { border-right-color: #ec971f; }
.tooltip.warning.bottom > .tooltip-arrow { border-bottom-color: #ec971f; }
.tooltip.warning.left > .tooltip-arrow { border-left-color: #ec971f; }
.tooltip.danger .tooltip-inner { background-color: #d9534f; }
.tooltip.danger.top > .tooltip-arrow { border-top-color: #d9534f; }
.tooltip.danger.right > .tooltip-arrow { border-right-color: #d9534f; }
.tooltip.danger.bottom > .tooltip-arrow { border-bottom-color: #d9534f; }
.tooltip.danger.left > .tooltip-arrow { border-left-color: #d9534f; }
Here is complete working code:
https://codepen.io/anon/pen/pVGKpW
Change Bootstrap tooltip color
You can use this way:
<a href="#" data-toggle="tooltip" data-placement="bottom"
title="" data-original-title="Tooltip on bottom"
class="red-tooltip">Tooltip on bottom</a>
And in the CSS:
.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
jsFiddle
Moeen MH: With the most recent version of bootstrap, you may need to do this in order to get rid of black arrow:
.red-tooltip + .tooltip.top > .tooltip-arrow {background-color: #f00;}
Use this for Bootstrap 4:
.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
border-bottom-color: #f00; /* Red */
}
Full Snippet:
$(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>
Change tooltip background color with new class
Bootstrap generates a new html element as "tooltip" and attach it to the document body, independient to the related a
tag. You can see the generated html in https://getbootstrap.com/docs/4.0/components/tooltips/#markup.
Because of this, updating the class in the related a
tag has no effect on the html generated by the tooltip. But you can apply different styles in several ways:
Modify the CSS of the "tooltip". Redefining classes as
.tooltip-inner
you can overwrite the base style (as in your code).Adding a class to the body of the desired pages, like
red-tooltip
and personalize the "toooltip" like this:
.red-tooltip .tooltip-inner {
background: red;
}
- My favourite is redefining the "tooltip" html template in javascript. This allows different styled tooltips in the same page.
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
$(function () {
$('[data-toggle="tooltip-red"]').tooltip({
template: '<div class="tooltip tooltip-red" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
})
})
.tooltip-red .tooltip-inner {
background: red;
}
.tooltip-red .bs-tooltip-top .arrow::before,
.tooltip-red .bs-tooltip-auto[x-placement^="top"] .arrow::before {
border-top-color: red;
}
.tooltip-red .bs-tooltip-right .arrow::before,
.tooltip-red .bs-tooltip-auto[x-placement^="right"] .arrow::before {
border-right-color: red;
}
.tooltip-red .bs-tooltip-bottom .arrow::before,
.tooltip-red .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
border-bottom-color: red;
}
.tooltip-red .bs-tooltip-left .arrow::before,
.tooltip-red .bs-tooltip-auto[x-placement^="left"] .arrow::before {
border-left-color: red;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me (Normal)</a>
<br>
<br>
<a href="#" data-toggle="tooltip-red" title="Some tooltip text!">Hover over me (Red)</a>
Related Topics
Validationsummary and Validationmessagefor with Custom CSS Shown When No Errors Present
How to Align Jsf Components to Center
Is There User-Select for Opera 10.62 and IE9
Using Less, CSS3 Calc() Doesn't Work Correctly
In CSS How to Change Font Size of H1 and H2
Center a <Ul> List with a Left Float <Li>'s with CSS
How to Set Background Url for CSS Files in Thymeleaf
Safari Font-Weight Issue , Text Too Bold
Change Svg Viewbox Size with CSS
How to Disable Stacking of Bootstrap Justified Tabs on Small Screens
What Does the Scalez() CSS Transform Function Do
How to Change Customized Carousel Indicator Background Color
How to Maintain Png Alpha Transparency When Using "-Ms-Filter" Property
How to Select First Img Tag in a Div with Many Img Tag