web-dev-qa-db-fra.com

supprimer la transparence de l'info-bulle d'amorçage

Le .tooltip standard de Twitter bootstrap a une transparence que je voudrais supprimer. 

C'est mon 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;
}

J'ai aussi créé un JSFiddle pour illustrer, ici: https://jsfiddle.net/fiddlejan/xpwhknja/

Si vous survolez le bouton, vous pouvez voir comment le texte de l'info-bulle transparent affiche également le texte situé en dessous. 

J'ai essayé: 

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

Mais cela ne semble pas fonctionner ... 

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-tooltip
12
ganjan

Ajoutez .tooltip.in{opacity:1!important;} dans css..Par défaut, c'est 0.9 c'est pourquoi l'arrière-plan est transparent jsfiddle

19
Dhara

Ajoutez à votre classe .tooltip également l'opacité 1, mais avec l'indicateur important. Voir la mise à jour Fiddle

Et dans votre violon, vous avez connecté bootstrap.min.css directement en HTML. Donc, sur votre site web, vous pouvez écrire

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

sans aucun !important et cela fonctionnera. Mais dans le violon ça ne marche pas parce que vous n’avez pas utilisé css External Resources

C'est parce que dans votre bootstrap.css vous avez

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

Bootstrap v4.0:

.tooltip.show {
    opacity: 1;
}
4
galengodis

S'il vous plaît utiliser! Important sur l'opacité comme-

.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);
}
2
Govind jha

Ajouter cette classe:

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

Vous devrez être spécifique car l'appel exact est constitué de deux classes dans un élément.

    .tooltip.in{
opacity: 0.9;
}

dans boostrap.min.css

Donc, remplacez simplement avec l'opacité 1;

J'espère que cela vous aidera, sinon vous aurez besoin de! Important ou d'un autre élément parent devant, mais vous ne pouvez pas voir votre ordre de chargement sur la page, vous n'êtes donc pas sûr de la priorité.

1
Jamie Paterson

Lorsque j'avais besoin de réduire la transparence de l'info-bulle fournie parngbTooltipc'est ce que j'ai ajouté dans mon fichier CSS. 

Note: J'utilisais Bootstrap v4 

::ng-deep .tooltip.show {
    opacity: 1!important;
}
0
Steffi Keran Rani J