rimuovere la trasparenza dal suggerimento bootstrap

Question

Lo standard .tooltip da twitter bootstrap ha una trasparenza che vorrei rimuovere.

Questo mio 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; 
} 

Inoltre ho fatto un JSFiddle per illustrare, qui: https://jsfiddle.net/fiddlejan/xpwhknja/

Se si posiziona il mouse sopra il pulsante è possibile guarda come il testo del tooltip trasparente mostra anche il testo sottostante.

ho provato:

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

Ma does't sembra funzionare ...

Answer 1

Aggiungi .tooltip.in{opacity:1!important;} in css..By difetto è che è 0.9 il motivo per cui sfondo è trasparente jsfiddle

Answer 2

Aggiungi alla tua classe .tooltip anche l'opacità 1, ma con bandiera important. Vedi aggiornato Fiddle

E nel telefono si è collegato bootstrap.min.css direttamente in html. Quindi nel tuo sito web è possibile scrivere

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

senza alcun !important e funzionerà. Ma in violino che non funziona perché non è stato utilizzato per questo css External Resources

suo perché nella vostra bootstrap.css avete

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

Answer 3

Aggiungi questa classe:

.tooltip.in { 
    opacity: 1 !important; 
} 

Answer 4

avrete devono essere specifici, come la chiamata esatto è di due classi in un unico elemento

.tooltip.in{ 
opacity: 0.9; 
} 

in boostrap.min.css

Quindi, solo sovrascrivere con opacità del 1;

Spero che questo aiuti, se non è necessario! Importante o un altro elemento genitore di fronte - ma non posso vedere il tuo ordine di caricamento sulla pagina, quindi non sono sicuro sulla precedenza.

Answer 5

Si prega di usare! Importante opacità come-

.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; } 

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