remove transparency from bootstrap tooltip

Question

The standard .tooltip from twitter bootstrap has a transparency that I would like to remove.

This my HTML:

<a href="#" class="btn btn-info"  style="margin:10px;"  data-toggle="tooltip"  data-placement="bottom"  data-html="true" title="MERKNAD 1 Denne klassifiseringen er i henhold til NS-EN 13501-2. <br /><br /> MERKNAD 2 Valgene 11-16 gjelder bærende konstruksjoner, valgene 21-24 gjelder kun integritet, valgene 31-37 gjelder både integritet og isolasjon, valgene 41-46 gjelder bærende skiller konstruksjoner med isolasjonskrav, og valgene 51-54 gjelder seksjoneringsvegger og dekker.">Hover</a> 

CSS:

.tooltip > .tooltip-inner {     border: 1px solid;     padding: 10px;     max-width: 450px;     color: black;     text-align: left;     background-color: white;     background: white;     opacity: 1.0;     filter: alpha(opacity=100); } .tooltip > .tooltip-arrow {     border-bottom-color: black; } 

Also I made a JSFiddle to illustrate, here: https://jsfiddle.net/fiddlejan/xpwhknja/

If you hover over the button you can see how the transparent tooltip text is also showing the text underneath.

I tried:

opacity: 1.0; filter: alpha(opacity=100); 

But it does't seem to work...

Answer 1

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