web-dev-qa-db-fra.com

Comment pouvons-nous changer la couleur de la flèche dans le popover de bootstrap?

  <div class="  affix  popover right" id ="one" style="margin-left:8em;margin-top:10em;  width:15em;background-color:rgba(228,19,47,0.9);padding:5px;border-radius:10px;">
    <div class="arrow" style="margin-top:-45px;"></div> 
    <center style="padding:20px;"><b>this is the message</b></center>
 </div>

Ce code crée le popover avec une flèche comment pouvons-nous changer la couleur de cette flèche.

enter image description here

csstwitter-bootstrap
17
dpndra

Utilisez cette css changeant la couleur droite/droite de pseudo

.popover.right .arrow:after {
  border-right-color: red;
}

DEMO

32
Manwal

J'ai découvert qu'il fallait remplacer une classe pour chacune des positions possibles du popover. Dans cet exemple, mon popover "tour" a un fond sombre et un texte blanc:

.popover[class*=tour-] {
    background: #434A54;
    color: white;
}

/* Needed to have the triangle match the grey background of the popover */
.popover[class*=tour-].top .arrow:after {
    border-top-color: #434A54;
}

.popover[class*=tour-].right .arrow:after {
    border-right-color: #434A54;
}

.popover[class*=tour-].bottom .arrow:after {
    border-bottom-color: #434A54;
}

.popover[class*=tour-].right .arrow:after {
    border-left-color: #434A54;
}
3
MSC

Utiliser un popover standard dans Bootstrap 3, comme dans:

<button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" data-content="this is the message">
  Popover on right
</button>

Vous pouvez ajouter le css suivant à vos règles personnalisées:

.popover {
  background-color: red; /*substitute 'red' with your color of choice*/
  border-color: red;
}
.popover.right>.arrow:after {
  border-right-color: red;
}
.popover-content {
  background-color: red;
}
3
jme11

[Popover Bootstrap avec la flèche et la couleur de fond]

.popover{
   background: #ebd997;
    height: 100px;
    width: 500px;
}

.popover.top> .arrow:after {
    border-top-color: #ebd997;
}

1
Popeye

Pas sûr, mais vous pouvez essayer de changer 

<div class="arrow" style="margin-top:-45px;"></div>

à 

<div class="arrow" style="margin-top:-45px; color: red;"></div>

J'espère que cela t'aides.

Cordialement, Alex

1
Alex Szabó

Dans Bootstrap 4,

.bs-popover-top .arrow::after,
.bs-popover-auto[x-placement^="top"] .arrow::after {
    border-top-color: yellow; // Any color here
}
0
KimchiMan

Si vous utilisez Angular2/4/5 , avec NGX-Bootstrap Je réussis à le changer avec CSS, cliquez sur sur du texte normal pour le survoler. Les autres ne fonctionnent pas car container = "body" n'est pas utilisé. dans angular ils créent [_ nghost-c0] si vous utilisez container = "body".

  :Host /deep/.popover.top > .arrow:after 
{
     border-top-color: red;
}
:Host/deep/.curvepopover{
    border-radius:10px;
    border:4px solid red;
    
}

0
GoodJeans