remove transparency from bootstrap tooltip

Bootstrap v4.0:

.tooltip.show {
    opacity: 1;
}

Add .tooltip.in{opacity:1!important;} in css..By default it is 0.9 that's why background is transparent jsfiddle

Add to your .tooltip class also opacity 1, but with flag important. See updated Fiddle

And in your fiddle you connected bootstrap.min.css directly in html. So in your website you can write

.tooltip.in {
  opacity: 1;
  filter:alpha(opacity=100);
}

without any !important and it will work. But in fiddle it doesn't work because you didn't use for that css External Resources

Its because in your bootstrap.css you have

.tooltip.in{filter:alpha(opacity=90);opacity:.9}

Related