web-dev-qa-db-fra.com

Changer la couleur d'arrière-plan bootstrap popover

J'essaie de changer le CSS sur un popover bootstrap. Je veux changer tout l'arrière-plan de popover, pas seulement le texte.

Aucune suggestion?

http://bootply.com/110002

$(document).ready(function() {
  $("[rel='Android']").popover({
    html: 'true', 
    content: '<div id="popOverBox">Coming March 2014</div>'
   });
});

CSS

 #popOverBox {
     background: tomato;
     font-family: serif;
 }
javascriptjqueryhtmlcsstwitter-bootstrap
11
Ryan Salmons

Vous cibleriez l'élément .popover au lieu de #popOverBox

EXEMPLE ICI 

.popover {
    background: tomato;
}

Et pour changer l’arrière-plan de la flèche (pseudo-élément), vous utiliseriez:

.popover.bottom .arrow:after {
    border-bottom-color: tomato;
}
27
Josh Crozier

.popover {background-color: tomato;}
.popover.bottom .arrow::after {border-bottom-color: tomato; }
.popover-content {background-color: tomato;}
3
amit bende

Change l'arrière-plan et la couleur du texte dans Bootstrap-4 

 pendant que vous utilisez sass-bootstrap-4, vous pouvez le faire facilement en modifiant simplement certaines valeurs de variables.

Voici les variables du fichier _variables.scss: 

$popover-inner-padding: 1px !default;
$popover-bg: #fff !default;
$popover-max-width: 276px !default;
$popover-border-width: $border-width !default;
$popover-border-color: rgba(0, 0, 0, .2) !default;
$popover-box-shadow: 0 5px 10px rgba(0, 0, 0, .2) !default;

$popover-title-bg: darken($popover-bg, 3%) !default;
$popover-title-padding-x: 14px !default;
$popover-title-padding-y: 8px !default;

$popover-content-padding-x: 14px !default;
$popover-content-padding-y: 9px !default;

$popover-arrow-width: 10px !default;
$popover-arrow-color: $popover-bg !default;

$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default;
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;

Je les change en bleu clair avec la variable $ brand-info:
Remarque: mieux vaut copier ces variables dans votre propre fichier custom.scss, puis les modifier. 

$popover-inner-padding: 1px !default;
$popover-bg: #fff !default;
$popover-max-width: 276px !default;
$popover-border-width: $border-width !default;
$popover-border-color: $brand-info;
$popover-box-shadow: 0 5px 10px rgba(0, 0, 0, .2) !default;

$popover-title-bg: $brand-info;
$popover-title-padding-x: 14px !default;
$popover-title-padding-y: 8px !default;

$popover-content-padding-x: 14px !default;
$popover-content-padding-y: 9px !default;

$popover-arrow-width: 10px !default;
$popover-arrow-color: $popover-bg !default;

$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default;
$popover-arrow-outer-color:$brand-info;

La sortie après modification des variables: 

 enter image description here

1
Sabir Hussain

Notez que si vous utilisez les fichiers less ou sass, vous pouvez également procéder comme suit:

@popover-bg: tomato;

De cette façon, pas besoin de s'inquiéter du côté de la flèche.

0
richinator38

Le temps est passé de toute façon, je voudrais signaler ma solution personnelle dans LESS (répond effectivement à mes besoins, mais je pense que cela peut être utile à certains ici). Ajouter une classe à class="popover", comme class="popover popover-warning" et moins faire quelque chose comme ça:

.popover-warning {
  background-color: #f0ad4e !important;
  & .arrow, .arrow:after {
    border-left-color: #f0ad4e !important;
    border-left-color: rgba(0, 0, 0, 0.25);
  }
  & .popover-content, .popover-title {
    background-color: #f0ad4e !important;
  }
}

J'espère que cela t'aides.

0
Nineoclick