web-dev-qa-db-fra.com

Modification des couleurs de l'info-bulle de Twitter Bootstrap en fonction de la position

J'essaie de produire différentes couleurs pour les info-bulles (éditer: sur Twitter Bootstrap), mais il semble que je ne l’aie pas bien comprise. Changer la couleur par défaut n'a pas été difficile, il suffit de changer les couleurs pour .tooltip et ses définitions associées. 

Cependant, en supposant que je veuille changer la couleur d'une info-bulle spécifique dans le corps

<div id="users" class="row">
    <div id="photo_stack" class="span6 photo_stack">
        <img id="photo1" src="" width="400px" height="300px" alt="" rel="tooltip" data-placement="right" title="Other Color" />

Une approche simple comme

#users .tooltip { background-color: #somecolor; }

ne semble pas fonctionner. Je suppose que c'est quelque chose à propos du DOM et que je devrais attacher une sorte de classe aux info-bulles spécifiques? Ou suis-je complètement éteint? Merci :)

Voici un JSFiddle: http://jsfiddle.net/rZxrm/

javascriptcsstwitter-bootstraptooltip
15
Simon

Twitter Bootstrap n'a pas cette fonctionnalité intégrée, mais vous pouvez ajouter vos propres fonctions pour le faire, comme ceci:

$('#photo1').hover(function() {$('.tooltip').addClass('tooltipPhoto')}, function () {$('.tooltip').removeClass('tooltipPhoto')});​

et il vous suffit ensuite de définir la classe tooltipPhoto en CSS pour avoir une couleur de fond différente.

EDIT: Solution mise à jour:

function changeTooltipColorTo(color) {
    $('.tooltip-inner').css('background-color', color)
    $('.tooltip.top .tooltip-arrow').css('border-top-color', color);
    $('.tooltip.right .tooltip-arrow').css('border-right-color', color);
    $('.tooltip.left .tooltip-arrow').css('border-left-color', color);
    $('.tooltip.bottom .tooltip-arrow').css('border-bottom-color', color);
}

$(document).ready(function () {
    $("[rel=tooltip]").tooltip();
    $('#photo1').hover(function() {changeTooltipColorTo('#f00')});
    $('#photo2').hover(function() {changeTooltipColorTo('#0f0')});
    $('#photo3').hover(function() {changeTooltipColorTo('#00f')});
});
15
Miha Rekar

Si vous utilisez une info-bulle, vous voudrez peut-être utiliser les couleurs de thème intégrées qui sont info, succès, danger et avertissement. Cependant, Bootstrap ne prend pas en charge les thèmes pour les info-bulles (dans la V3 au moment de la rédaction), mais nous pouvons ajouter quelques lignes de CSS pour y parvenir.

Idéalement, nous voulons un ensemble de classes tooltip-info, tooltip-danger, tooltip-success, etc. que vous pouvez appliquer à l'élément que vous appelez tooltip(). Je donnerai le code ci-dessous qui fait exactement cela et qui est testé avec Bootstrap 3.0.

Résultat

enter image description here

enter image description here

Comment ça marche

Le code ci-dessous réutilise essentiellement les styles pour le composant alert car il est très similaire à l'info-bulle. Notez que cela présente peu d'avantages, notamment le fait que non seulement la couleur d'arrière-plan change, mais aussi la couleur du texte et la couleur de la bordure. De plus, elle donne à l'info-bulle un aspect légèrement transparent et brillant. La flèche dans l'info-bulle dépend de la couleur de la bordure. Elle est donc modifiée séparément en héritant de la couleur de la bordure du composant d'alerte.

Notez également que ce ne sont pas des changements globaux. Sauf si vous appliquez des classes comme tooltip-info, vous obtenez l'info-bulle par défaut.

Usage

<span class="tooltip-info"  title="Hello, I'm dangerous">
    Hover here to see tooltip!
</span>

Notez que les info-bulles Bootstrap ne sont pas activées par défaut. Vous devez donc procéder de la sorte (voir https://stackoverflow.com/a/20877657/207661 )

$(document.body).tooltip({ selector: "[title]" });

Fiddle

Jouez avec ce code ici: http://jsbin.com/usIyoGUD/3/edit?html,css,output

MOINS CSS Source

//Import these from your own Bootstrap folder
@import  "js/ext/bootstrap/less/mixins.less";
@import  "js/ext/bootstrap/less/variables.less";

.tooltip-border-styles(@borderColor) {
    & + .tooltip {
        &.top .tooltip-arrow,
        &.top-left .tooltip-arrow,
        &.top-right .tooltip-arrow {
            border-top-color: @borderColor;
        }
        &.bottom .tooltip-arrow,
        &.bottom-left .tooltip-arrow,
        &.bottom-right .tooltip-arrow {
            border-bottom-color: @borderColor;
        }
        &.right .tooltip-arrow {
            border-right-color: @borderColor;
        }
        &.left .tooltip-arrow {
            border-left-color: @borderColor;
        }
    }
}

.tooltip-info {
  & + .tooltip .tooltip-inner {
    .alert-info;
  }
  .tooltip-border-styles(@alert-info-border);
}
.tooltip-danger {
  & + .tooltip .tooltip-inner {
    .alert-danger;
  }
  .tooltip-border-styles(@alert-danger-border);
}
.tooltip-warning {
  & + .tooltip .tooltip-inner {
    .alert-warning;
  }
  .tooltip-border-styles(@alert-warning-border);
}
.tooltip-success {
  & + .tooltip .tooltip-inner {
    .alert-success;
  }
  .tooltip-border-styles(@alert-success-border);
}

CSS compilé

Si vous n'utilisez pas LESS ou ne voulez pas y faire face, vous pouvez utiliser directement les CSS compilés ci-dessous:

.tooltip-info + .tooltip .tooltip-inner {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
  background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
  background-repeat: repeat-x;
  border-color: #9acfea;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
}
.tooltip-info + .tooltip.top .tooltip-arrow,
.tooltip-info + .tooltip.top-left .tooltip-arrow,
.tooltip-info + .tooltip.top-right .tooltip-arrow {
  border-top-color: #bce8f1;
}
.tooltip-info + .tooltip.bottom .tooltip-arrow,
.tooltip-info + .tooltip.bottom-left .tooltip-arrow,
.tooltip-info + .tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: #bce8f1;
}
.tooltip-info + .tooltip.right .tooltip-arrow {
  border-right-color: #bce8f1;
}
.tooltip-info + .tooltip.left .tooltip-arrow {
  border-left-color: #bce8f1;
}
.tooltip-danger + .tooltip .tooltip-inner {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
  background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
  background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
  background-repeat: repeat-x;
  border-color: #dca7a7;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
}
.tooltip-danger + .tooltip.top .tooltip-arrow,
.tooltip-danger + .tooltip.top-left .tooltip-arrow,
.tooltip-danger + .tooltip.top-right .tooltip-arrow {
  border-top-color: #ebccd1;
}
.tooltip-danger + .tooltip.bottom .tooltip-arrow,
.tooltip-danger + .tooltip.bottom-left .tooltip-arrow,
.tooltip-danger + .tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: #ebccd1;
}
.tooltip-danger + .tooltip.right .tooltip-arrow {
  border-right-color: #ebccd1;
}
.tooltip-danger + .tooltip.left .tooltip-arrow {
  border-left-color: #ebccd1;
}
.tooltip-warning + .tooltip .tooltip-inner {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
  background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
  background-repeat: repeat-x;
  border-color: #f5e79e;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
}
.tooltip-warning + .tooltip.top .tooltip-arrow,
.tooltip-warning + .tooltip.top-left .tooltip-arrow,
.tooltip-warning + .tooltip.top-right .tooltip-arrow {
  border-top-color: #faebcc;
}
.tooltip-warning + .tooltip.bottom .tooltip-arrow,
.tooltip-warning + .tooltip.bottom-left .tooltip-arrow,
.tooltip-warning + .tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: #faebcc;
}
.tooltip-warning + .tooltip.right .tooltip-arrow {
  border-right-color: #faebcc;
}
.tooltip-warning + .tooltip.left .tooltip-arrow {
  border-left-color: #faebcc;
}
.tooltip-success + .tooltip .tooltip-inner {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
  background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
  background-repeat: repeat-x;
  border-color: #b2dba1;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
}
.tooltip-success + .tooltip.top .tooltip-arrow,
.tooltip-success + .tooltip.top-left .tooltip-arrow,
.tooltip-success + .tooltip.top-right .tooltip-arrow {
  border-top-color: #d6e9c6;
}
.tooltip-success + .tooltip.bottom .tooltip-arrow,
.tooltip-success + .tooltip.bottom-left .tooltip-arrow,
.tooltip-success + .tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: #d6e9c6;
}
.tooltip-success + .tooltip.right .tooltip-arrow {
  border-right-color: #d6e9c6;
}
.tooltip-success + .tooltip.left .tooltip-arrow {
  border-left-color: #d6e9c6;
}
16
Shital Shah

J'ai trouvé une autre solution à votre problème (j'essayais de faire la même chose). Changez simplement la couleur dans votre feuille de style CSS principale (elle remplacera celle de bootstrap tant que votre feuille de style est listée après bootstrap dans l'en-tête de votre doc).

Plus précisément, voici ce que vous ajoutez à votre feuille de style principale (à titre d'exemple):

.tooltip-inner {
  background-color: #D13127;
  color: #fff;
}

.tooltip.top .tooltip-arrow {
  border-top-color: #D13127;
}
14
Liz Goncalves

See Ajout dynamique d'une classe au conteneur 'popover' de Bootstrap

Son correctif autorise un sélecteur de classe de données en modifiant bootstrap.js avec une seule ligne

2
Peter Ehrlich

Voici comment je le fais en sass

  .tooltip-inner
    color: #fff
    background-color: #111
    border: 1px solid #fff

  .tooltip.in
    opacity: .9

Et la partie dépendante de la position

  .tooltip.bottom .tooltip-arrow
    border-bottom-color: #fff
1
Emanuel

Voir ma réponse à une question similaire: Changer la couleur de l'info-bulle d'amorçage

Il est applicable aux info-bulles de style des éléments existants et créés de manière dynamique, à l’aide de Bootstrap 3 ou Bootstrap 4.

Bootstrap 3:

$(document).on('inserted.bs.tooltip', function(e) {
    var tooltip = $(e.target).data('bs.tooltip');
    tooltip.$tip.addClass($(e.target).data('tooltip-custom-class'));
});

Exemples:
pour Bootstrap 3
pour Bootstrap 4

0
Sergey Nudnov