Styliser la flèche sur bootstrap info-bulles)
J'essaie de styler tootltips en utilisant
.tooltip-inner{}
Mais j'ai des problèmes parce que je ne trouve pas comment styler une info-bulle avec une petite flèche.
Comme indiqué sur la capture d'écran, la flèche de l'info-bulle est en noir. Je souhaite ajouter une nouvelle couleur à cette action:
toute suggestion?
Vous pouvez l'utiliser pour changer la couleur de la flèche de la bulle d'aide
.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-bottom-color: #000000; /* black */
border-width: 0 5px 5px;
}
Utilisez cette feuille de style pour commencer!
.tooltip{
position:absolute;
z-index:1020;
display:block;
visibility:visible;
padding:5px;
font-size:11px;
opacity:0;
filter:alpha(opacity=0)
}
.tooltip.in{
opacity:.8;
filter:alpha(opacity=80)
}
.tooltip.top{
margin-top:-2px
}
.tooltip.right{
margin-left:2px
}
.tooltip.bottom{
margin-top:2px
}
.tooltip.left{
margin-left:-2px
}
.tooltip.top .tooltip-arrow{
bottom:0;
left:50%;
margin-left:-5px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #000
}
.tooltip.left .tooltip-arrow{
top:50%;
right:0;
margin-top:-5px;
border-top:5px solid transparent;
border-bottom:5px solid transparent;
border-left:5px solid #000
}
.tooltip.bottom .tooltip-arrow{
top:0;
left:50%;
margin-left:-5px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-bottom:5px solid #000
}
.tooltip.right .tooltip-arrow{
top:50%;
left:0;
margin-top:-5px;
border-top:5px solid transparent;
border-bottom:5px solid transparent;
border-right:5px solid #000
}
.tooltip-inner{
max-width:200px;
padding:3px 8px;
color:#fff;
text-align:center;
text-decoration:none;
background-color:#000;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px
}
.tooltip-arrow{
position:absolute;
width:0;
height:0
}
J'ai créé du violon pour vous.
Jeter un coup d'œil à here
<p>
<a class="tooltip" href="#">Tooltip
<span>
<img alt="CSS Tooltip callout"
src="http://www.menucool.com/tooltip/src/callout.gif" class="callout">
<strong>Most Light-weight Tooltip</strong><br>
This is the easy-to-use Tooltip driven purely by CSS.
</span>
</a>
</p>
a.tooltip {
outline: none;
}
a.tooltip strong {
line-height: 30px;
}
a.tooltip:hover {
text-decoration: none;
}
a.tooltip span {
z-index: 10;
display: none;
padding: 14px 20px;
margin-top: -30px;
margin-left: 28px;
width: 240px;
line-height: 16px;
}
a.tooltip:hover span {
display: inline;
position: absolute;
color: #111;
border: 1px solid #DCA;
background: #fffAF0;
}
.callout {
z-index: 20;
position: absolute;
top: 30px;
border: 0;
left: -12px;
}
/*CSS3 extras*/
a.tooltip span {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 5px 5px 8px #CCC;
-webkit-box-shadow: 5px 5px 8px #CCC;
box-shadow: 5px 5px 8px #CCC;
}
Vous pouvez toujours essayer de mettre ce code dans votre css principal sans modifier le fichier bootstrap), ce qui est le plus recommandé. Vous conservez ainsi la cohérence si vous mettez à jour le bootstrap fichier.
.tooltip-inner {
background-color: #FF0000;
}
.tooltip.right .tooltip-arrow {
border-right: 5px solid #FF0000;
}
Notez que cet exemple concerne une info-bulle correcte. La propriété tooltip-inner change la couleur du BG de l'info-bulle, l'autre la couleur de la flèche.
Pour styliser chaque flèche directionnelle (gauche, droite, haut et bas), nous devons sélectionner chaque flèche à l'aide du sélecteur d'attribut CSS , puis les styler individuellement.
Astuce: La flèche du haut doit avoir une couleur de bordure uniquement sur le dessus et transparente sur les 3 autres côtés. Les autres flèches directionnelles doivent également être désignées de cette façon.
cliquez ici pour Working Jsfiddle Link
Voici le CSS simple,
.tooltip-inner { background-color:#8447cf;}
[data-placement="top"] + .tooltip > .tooltip-arrow { border-top-color: #8447cf;}
[data-placement="right"] + .tooltip > .tooltip-arrow { border-right-color: #8447cf;}
[data-placement="bottom"] + .tooltip > .tooltip-arrow {border-bottom-color: #8447cf;}
[data-placement="left"] + .tooltip > .tooltip-arrow {border-left-color: #8447cf; }
La flèche est une bordure.
Vous devez changer pour chaque flèche la couleur en fonction du "placement des données" de l'info-bulle.
.tooltip.top .tooltip-arrow {
border-top-color: @color;
}
.tooltip.top-left .tooltip-arrow {
border-top-color: @color;
}
.tooltip.top-right .tooltip-arrow {
border-top-color:@color;
}
.tooltip.right .tooltip-arrow {
border-right-color: @color;
}
.tooltip.left .tooltip-arrow {
border-left-color: @color;
}
.tooltip.bottom .tooltip-arrow {
border-bottom-color: @color;
}
.tooltip.bottom-left .tooltip-arrow {
border-bottom-color: @color;
}
.tooltip.bottom-right .tooltip-arrow {
border-bottom-color: @color;
}
.tooltip > .tooltip-inner {
background-color: @color;
}
Si vous souhaitez styliser uniquement les couleurs des info-bulles, procédez comme suit:
.tooltip-inner { background-color: #000; color: #fff; }
.tooltip.top .tooltip-arrow { border-top-color: #000; }
.tooltip.right .tooltip-arrow { border-right-color: #000; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: #000; }
.tooltip.left .tooltip-arrow { border-left-color: #000; }
Celui-ci a fonctionné pour moi!
.tooltip .tooltip-arrow {
border-top: 5px solid red !important;}
Si vous vous rendez compte de façon approximative et qu'aucune des options ci-dessus ne fonctionne, il est possible que vous rencontriez un conflit d'espace de noms sur .tooltip avec bootstrap et jquery.
Voir cette réponse pour résoudre ce problème: les infobulles jQueryUI sont en concurrence avec Twitter Bootstrap