supprimer la transparence de bootstrap info-bulle
La norme .bulle d'aide de twitter bootstrap a une transparence que je voudrais supprimer.
Ce mon code 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;
}
Aussi j'ai fait un JSFiddle pour illustrer, ici:
https://jsfiddle.net/fiddlejan/xpwhknja/
Si vous passez la souris sur le bouton, vous pouvez voir comment le transparent texte d'info-bulle affiche le texte en dessous.
J'ai essayé:
opacity: 1.0;
filter: alpha(opacity=100);
Mais il ne semble pas fonctionner...
Il est pour moi dans Chrome
pour moi Dans firefox aussi.
C'est une très légère transparence. Si vous regardez de près, vous verrez
Oh les gars, vous avez raison. Je suis actuellement des tests sur un ordinateur portable avec un peu de soleil dans les yeux... Mon mauvais, désolé!
pour moi Dans firefox aussi.
C'est une très légère transparence. Si vous regardez de près, vous verrez
Oh les gars, vous avez raison. Je suis actuellement des tests sur un ordinateur portable avec un peu de soleil dans les yeux... Mon mauvais, désolé!
OriginalL'auteur ganjan | 2016-01-29
Vous devez vous connecter pour publier un commentaire.
Ajouter
.tooltip.in{opacity:1!important;}
dans css..By par défaut il est0.9
c'est pourquoi le fond est transparentjsfiddle
OriginalL'auteur Dhara
Ajouter à votre
.tooltip
classe également l'opacité de 1, mais avec le drapeauimportant
.Voir mise à jour Violon
Et dans votre violon vous connecté
bootstrap.min.css
directement dans le html. Donc, dans votre site, vous pouvez écriresans
!important
et il va fonctionner. Mais dans le violon, ça ne fonctionne pas parce que vous n'avez pas l'utilisation de cssExternal Resources
Sa parce que dans votre fichier d'amorçage.css vous avez
Vous devez utiliser toute règle plus spécifique au lieu d'utiliser
!important
déclarationCertes, vous pouvez la remplacer par un parent de l'élément sélecteur plutôt que !important
vous avez raison. Mais attention, sujet starter placé des liens directement à
<html>
dans JSFiddle. Si le connecter styles normalement, avecexternal resources
donc pas besoin de"!important".Ya bon point si seulement chargé après le CSS de bootstrap un
OriginalL'auteur Narek-T
Bootstrap v4.0:
OriginalL'auteur galengodis
Veuillez utiliser !important sur l'opacité comme-
OriginalL'auteur Govind jha
Ajouter cette classe :
OriginalL'auteur sanjeev jha
Vous aurez besoin pour être précis comme l'exact appel est de deux classes dans un seul élément
dans bootstrap.min.css
Donc juste remplacer avec une opacité de 1;
Espère que cette aide, si non, vous en aurez besoin !important ou un autre parent de l'élément en avant, mais ne peux pas voir votre ordre de chargement de la page si vous ne savez pas la priorité.
body .tooltip.in{ opacity: 1; }
fixeOriginalL'auteur Jamie Paterson
Quand j'en avais besoin pour réduire la transparence de l'info-bulle fournis par
ngbTooltip
c'est ce que j'ai ajouté dans mon fichier CSS.Remarque: j'ai été en utilisant Bootstrap v4
OriginalL'auteur Steffi Keran Rani J