web-dev-qa-db-fra.com

Changer la couleur de l'info-bulle d'amorçage

Ce que j'essaie de faire est de changer la couleur de l'info-bulle en rouge. Toutefois, je souhaite également disposer de plusieurs autres couleurs afin de ne pas simplement remplacer la couleur de l'info-bulle d'origine.

Comment pourrais-je m'y prendre?

htmlcsscss3twitter-bootstrap
104
John Smith

Vous pouvez utiliser cette façon:

<a href="#" data-toggle="tooltip" data-placement="bottom"
   title="" data-original-title="Tooltip on bottom"
   class="red-tooltip">Tooltip on bottom</a>

Et dans le CSS:

.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}

jsFiddle

Moeen MH : Avec la version la plus récente de bootstrap, vous devrez peut-être le faire pour supprimer la flèche noire:

.red-tooltip + .tooltip.top > .tooltip-arrow {background-color: #f00;}

Utilisez ceci pour Bootstrap 4:

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #f00; /* Red */
}

Extrait complet:

$(function() {
  $('[data-toggle="tooltip"]').tooltip()
})
.tooltip-main {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-weight: 700;
  background: #f3f3f3;
  border: 1px solid #737373;
  color: #737373;
  margin: 4px 121px 0 5px;
  float: right;
  text-align: left !important;
}

.tooltip-qm {
  float: left;
  margin: -2px 0px 3px 4px;
  font-size: 12px;
}

.tooltip-inner {
  max-width: 236px !important;
  height: 76px;
  font-size: 12px;
  padding: 10px 15px 10px 20px;
  background: #FFFFFF;
  color: rgb(0, 0, 0, .7);
  border: 1px solid #737373;
  text-align: left;
}

.tooltip.show {
  opacity: 1;
}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #f00;
  /* Red */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Hello world"><span class="tooltip-qm">?</span></div>
<style>
  .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
  .bs-tooltip-bottom .arrow::before {
    border-bottom-color: #f00;
    /* Red */
  }
</style>

151
Praveen Kumar Purushothaman

Bootstrap 2

Si vous souhaitez également modifier le signe curseur/flèche, procédez comme suit:

.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
.red-tooltip + .tooltip > .tooltip-arrow {border-bottom-color: #f00;}

ou

.red-tooltip + .tooltip > .tooltip-inner, .red-tooltip + .tooltip > .tooltip-arrow {background-color: #f00;}

jsFiddle: http://jsfiddle.net/technotarek/2htZe/

UPDATE: Bootstrap 3

Vous devez être spécifique pour la direction de l'info-bulle dans Bootstrap 3. Par exemple:

.tooltip.top .tooltip-inner {
    background-color:red;
}
.tooltip.top .tooltip-arrow {
      border-top-color: red;
}

jsFiddle pour toutes les directions des info-bulles utilisant Bootstrap 3: http://jsfiddle.net/technotarek/L2rLE/

100
technoTarek

La seule façon de travailler pour moi:

$(document).ready(function() {
  //initializing tooltip
  $('[data-toggle="tooltip"]').tooltip();
});
.tooltip-inner {
  background-color: #00acd6 !important;
  /*!important is not necessary if you place custom.css at the end of your css calls. For the purpose of this demo, it seems to be required in SO snippet*/
  color: #fff;
}

.tooltip.top .tooltip-arrow {
  border-top-color: #00acd6;
}

.tooltip.right .tooltip-arrow {
  border-right-color: #00acd6;
}

.tooltip.bottom .tooltip-arrow {
  border-bottom-color: #00acd6;
}

.tooltip.left .tooltip-arrow {
  border-left-color: #00acd6;
}
<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!--tether-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<!--Bootstrap-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<!--Tooltip Example-->
<div style="padding:50px;">
  <span class="fa-stack fa-lg" data-toggle="tooltip" data-placement="right" title="custom colored tooltip">hover over me
</span>
</div>

54
Tuyen Cao

Pour la couleur de la flèche, vous pouvez utiliser ceci:

.tooltip .tooltip-arrow {border-top: 5px solid red !important;}
9
zvictor

Voici le code d'info-bulle dans le bootstrap ...

.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  Word-break: normal;
  Word-spacing: normal;
  Word-wrap: normal;
  white-space: normal;
  filter: alpha(opacity=0);
  opacity: 0;

  line-break: auto;
}
.tooltip.in {
  filter: alpha(opacity=90);
  opacity: .9;
}
.tooltip.top {
  padding: 5px 0;
  margin-top: -3px;
}
.tooltip.right {
  padding: 0 5px;
  margin-left: 3px;
}
.tooltip.bottom {
  padding: 5px 0;
  margin-top: 3px;
}
.tooltip.left {
  padding: 0 5px;
  margin-left: -3px;
}
.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 4px;
}
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.top-left .tooltip-arrow {
  right: 5px;
  bottom: 0;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.top-right .tooltip-arrow {
  bottom: 0;
  left: 5px;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #000;
}
.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #000;
}
.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
.tooltip.bottom-left .tooltip-arrow {
  top: 0;
  right: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
.tooltip.bottom-right .tooltip-arrow {
  top: 0;
  left: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
9
Julior

Pour bootstrap4 j'ai utilisé le code:

.tooltip-inner {
  background-color: #color !important;
  color: #color ;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: #color !important;
}

.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: #color !important;
}


.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: #color !important;
}


.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: #color !important;
}

6
GOTOLR

mon correctif jQuery:

HTML:

   <a href="#" data-toggle="tooltip" data-placement="right" data-original-title="some text">
       <span class="glyphicon glyphicon-question-sign"></span>
   </a>

jQuery:

$('[data-toggle="tooltip"]').hover(function(){
    $('.tooltip-inner').css('min-width', '400px');
    $('.tooltip-inner').css('color', 'red');
});
4
Dreal

Il est important de noter que depuis Bootstrap 4, vous pouvez personnaliser ces styles directement dans votre fichier de variables Bootstrap Sass. Vous avez donc les options suivantes dans _variables.scss:

//== Tooltips
//
//##

// ** Tooltip max width
$tooltip-max-width:           200px !default;
// ** Tooltip text color
$tooltip-color:               #fff !default;
// ** Tooltip background color
$tooltip-bg:                  #000 !default;
$tooltip-opacity:             .9 !default;

// ** Tooltip arrow width
$tooltip-arrow-width:         5px !default;
// ** Tooltip arrow color
$tooltip-arrow-color:         $tooltip-bg !default;

Voir ici: http://v4-alpha.getbootstrap.com/getting-started/options/

Il est préférable de travailler dans Sass et de compiler au fur et à mesure avec les outils de construction Grunt ou Gulp.

4
Eric Grotke

Vous pouvez utiliser ceci pour résoudre votre problème. Je l'ai vérifié dans mon projet et cela fonctionne bien. 

<a class="btn btn-sm btn-success media-tooltip" href="#" data-toggle="tooltip" data-placement="bottom" title="Download Now">Download Now</a>
    .media-tooltip + .tooltip .tooltip-inner {
        font-size: 14px; 
        font-weight: 700;
        color: rgb( 37, 207, 187 ); 
        border-width: 1px;
        border-color: rgb( 37, 207, 187 );
        border-style: solid;
        background-color: rgb( 219, 242, 239 );
        padding: 10px;
        border-radius: 0;
    } 
    .media-tooltip + .tooltip > .tooltip-arrow{display: none;}
    .media-tooltip + .tooltip .tooltip-inner:after, .media-tooltip + .tooltip .tooltip-inner:before {
         bottom: 89%;
         left: 50%;
         border: solid transparent;
         content: " ";
         height: 0;
         width: 0;
         position: absolute;
         pointer-events: none;
    }

    .media-tooltip + .tooltip .tooltip-inner:after {
        border-color: rgba(219, 242, 239, 0);
        border-bottom-color: #dbf2ef;
        border-width: 10px;
        margin-left: -10px;
    }
    .media-tooltip + .tooltip .tooltip-inner:before {
        border-color: rgba(37, 207, 187, 0);
        border-bottom-color: #25cfbb;
        border-width: 11px;
        margin-left: -11px;
    }
3
Akther Hussain

Aucune des réponses ci-dessus ne fonctionne correctement dans le cas de container: 'body', et la solution suivante fonctionne:

// Assign custom CSS class after the tooltip template has been added to the DOM
$(document).on('inserted.bs.tooltip', function(e) {
    var tooltip = $(e.target).data('bs.tooltip');
    tooltip.$tip.addClass($(e.target).data('tooltip-custom-class'));
});

Et un simple extrait de code CSS:

.tooltip.tooltip-danger > .tooltip-inner {
    background-color: #d9534f;
}

.tooltip.tooltip-danger.left > .tooltip-arrow {
    border-left-color: #d9534f;
}

Vous pouvez maintenant initialiser votre info-bulle comme une classe CSS habituelle, en passant par l'attribut data-tooltip-custom-class:

<span class="js-tooltip">Hover me totally</span>

<script>
$('.js-tooltip')
    .data('tooltip-custom-class', 'tooltip-danger')
    .tooltip(/*your options*/)
;
</script>
2
Oleg

Bootstrap 3 + SASS pour bas info-bulle: 

.red-tooltip {
    & + .tooltip.bottom {
          .tooltip-inner{background-color:$red;}
          .tooltip-arrow {border-bottom-color: $red;}
    }
}
2
Bertrand

Pour la flèche, confirmez d'abord quelle direction vous utilisez .Par exemple, j'utilise left direction, alors il devrait être

.tooltip .tooltip-inner {
    background-color:#2fa5fb;
}
.tooltip.left > .tooltip-arrow {
   border-left-color: #2fa5fb;
}
2
Amir Iqbal

semble avoir changé dans Bootstrap 4

Si vous voulez changer la couleur d'une info-bulle placée en bas en rouge, ajoutez simplement ceci à votre CSS:

.tooltip-inner {
    background-color: #f00;
}

.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #f00;
}
2
David

Vous pouvez utiliser l'approche rapide mentionnée dans d'autres réponses si vous souhaitez simplement changer de couleur. Toutefois, si vous utilisez Bootstrap, vous devez utiliser des thèmes pour que l'aspect et la convivialité soient cohérents. Malheureusement, il n'y a pas de support intégré pour les thèmes pour Bootstrap, alors j'ai écrit un petit morceau de CSS qui fait ça. Vous obtenez essentiellement les classes tooltip-info, tooltip-warning, etc. que vous pouvez ajouter à l'élément pour appliquer le thème.

Vous pouvez trouver ce code avec violon, exemples et autres explications dans cette réponse: https://stackoverflow.com/a/20880312/207661

2
Shital Shah

La flèche est une bordure.
Vous devez changer pour chaque flèche la couleur correspondante.

.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;
  font-size: @font-size-small;
}

Cependant, si je veux ajouter une classe pour changer la couleur (comme dans le violon avec '.class + .tooltip ...' cela ne fonctionne pas (bootstrap 3).
Si quelqu'un sait comment gérer ça?!?

2
C0ZEN

BootStrap 4

Lorsque vous utilisez BootStrap 4, l'info-bulle est ajoutée au bas de la balise body. Si votre info-bulle est l'enfant d'une autre balise, il n'y a aucun moyen de la cibler à l'aide de css. La seule façon dont j'ai trouvé que cela fonctionne est d'utiliser l'événement Insert.bs.tooltip et d'ajouter une classe à la div interne et à la flèche. Ensuite, vous pouvez cibler la classe en css.

// initialize tooltips
$('[data-toggle="tooltip"]').tooltip(); 

// Add the classes to the toolip when it is created
$('[data-toggle="tooltip"]').on('inserted.bs.tooltip',function () {
    var thisClass = $(this).attr("class");
    $('.tooltip-inner').addClass(thisClass);
    $('.arrow').addClass(thisClass + "-arrow");
});
/* style the tooltip box and arrow based on your class*/
.bs-tooltip-left .redTip {
    background-color: red !important
}
.bs-tooltip-left .redTip-arrow::before {
    border-left-color: red !important
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<p>Show a red tooltip <a href="#" class="redTip" data-toggle="tooltip" data-placement="left" title="You Did It!">Hover over me</a></p>
2
Kokomo

Cela a déjà été répondu correctement, mais je pense que je devrais aussi donner mon avis . Comme Cozen dit que ceci est une bordure, et pour que cela fonctionne, vous devez spécifier les classes pour le formater de la même manière que bootstrap. Alors tu peux faire ça 

.tooltip .tooltip-inner {background-color: #00a8c4; color: black;} 
.tooltip.top .tooltip-arrow {border-top-color: #00a8c4;}

ou vous pouvez faire le suivant, juste pour l'infobulle-flèche mais vous devez ajouter le! important, pour qu'il écrase le bootstrap css

.tooltip-arrow {border-top-color: #00a8c4!important;}
2
Paulo Borralho Martins

Cela changera la couleur de l'info-bulle dans bootstrap4, vous pouvez utiliser bottom, left, right pour ajouter CSS au lieu de top dans .bs-tooltip-top

.tooltip-inner {
background-color: #00acd6 !important;
color: #fff;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] 
.arrow::before {
border-top-color: #00acd6;
}
1
Manish

Vous pouvez utiliser cette façon:

Et dans le CSS:

.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {background-color: #000;}
1
Sandip

Cette méthode facile fonctionne pour moi lorsque je veux changer la couleur de fond des info-bulles d'amorçage:

$(function(){
    //$('.tooltips.red-tooltip').tooltip().data('bs.tooltip').tip().addClass('red-tooltip');
    $('.tooltips.red-tooltip').tooltip().data('tooltip').tip().addClass('red-tooltip');
});
.red-tooltip.tooltip.tooltip.bottom .tooltip-arrow, 
.red-tooltip.tooltip.tooltip.bottom-left .tooltip-arrow,
.red-tooltip.tooltip.tooltip.bottom-right .tooltip-arrow{border-bottom-color: red;}
.red-tooltip.tooltip.top .tooltip-arrow {border-top-color: red;}
.red-tooltip.tooltip.left .tooltip-arrow {border-left-color: red;}
.red-tooltip.tooltip.right .tooltip-arrow {border-right-color: red;}
.red-tooltip.tooltip > .tooltip-inner{background-color:red;}
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tooltip.js"></script>

<a href="#" data-toggle="tooltip" data-placement="bottom"
   title="" data-original-title="Made by @Ram"
   class="tooltips red-tooltip">My link with red tooltip</a>

Pas de thé: 

Sijs code include .data('tooltip') ne fonctionnant pas pour vous, prière de commenter sa ligne} _ et sans commentairejs code include .data('bs-tooltip').

Note B: 

Si votre fonction d'info-bulle d'amorçage ajoute une info-bulle à la fin du corps (pas juste après l'élément), ma solution fonctionne encore mais certaines autres réponses de cette page ne fonctionnaient pas comme @Praveen Kumar} et @technoTarek dans ce scénario.

Note C: 

Ces codes prennent en charge tooltip arrow couleur dans tous les emplacements de l'info-bulle (top, bottom, left, right).

0
RAM

pour Bootstrap 4 version via CSS:

si vous voulez changer la couleur de fondde la bulle:

/* change style balloon */
.tooltip-inner {
    background-color: green !important;
    color: #fff;
}

si vous voulez changer la flèche quand apparaît dansposition du bas:

/* change style arrow */
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
    border-bottom-color: #f00;
}

J'espère vous aider

0
Salvo

Pour Bootstrap 4 avec dépendance sur tether.js, les classes .tooltip-arrow ont été remplacées par .tooltip.bs-tether-element-attachment- [position] {...} 

Voici comment j'ai changé de couleur et épaissie flèche du bas. Pour chaque pixel ajouté à la largeur de la bordure, je devais soustraire un pixel de la position "du bas". 

.tooltip.bs-tether-element-attached-bottom .tooltip-inner::before, .tooltip.tooltip-bottom .tooltip-inner::before {

    border-top-color: #d19b3d !important;
    border-width: 10px 10px 0;
    bottom: -5px;
}

Vous devrez ajuster pour d'autres positions, c'est-à-dire pour .tooltip.bs-tether-element-Attaché-gauche, vous ajusteriez la bordure droite, et vous repositionnerez si vous augmentez la largeur de la bordure en soustrayant les pixels de "gauche", etc.

0
deusoz

Dans votre projet BS4, si vous êtes capable de compiler du code SASS, vous pouvez tirer parti de la création d'un mixin pour gérer le jeu de couleurs des info-bulles dans n'importe quelle direction.

Avantages de cette approche:

  • Vous n'avez pas besoin d'ajouter de javaScript/jQuery supplémentaire pour quelque chose qui implique un style.
  • Vous tirez parti de SASS pour gérer de manière dynamique l’image de marque pour vous.
  • Vous pouvez facilement contrôler quelles info-bulles ont quelles couleurs et quelle direction.

Voici l'une des nombreuses façons dont vous pouvez implémenter ceci:

Créez votre mixin original:

  • Fournir une variable pour une couleur
  • Définissez 2 paramètres (un pour le nom de classe personnalisé de votre info-bulle et l'autre pour la couleur). J'ajoute également des valeurs par défaut pour ces paramètres (facultatif).

  • Créez une liste et parcourez-la pour parcourir les 4 directions possibles

    //define a color
$m-color-blue: #004c97;

//create a mixin with parameters and default value
@mixin m-tooltip-color-direction($name:'.mtootltip', $color:$m-color-blue) {

//reference your custom class name
#{$name} {
    .tooltip-inner {
        background-color: $color;
    }

    //create a list of possible directions
    $directions: top bottom left right;

    //loop through the list
    @each $direction in $directions {
        &.bs-tooltip-#{$direction} .arrow:before,
         .bs-tooltip-auto[x-placement^="$direction"] .arrow:before {
            border-#{$direction}-color: $color !important;
        }
     }
  }
}


Appelez votre mixin (ajustez le nom et la couleur de la classe)

  • Dans votre fichier .scss principal, appelez votre mixin comme suit:

    @include m-tooltip-color-direction('.mtooltip', $m-color-blue);


Placez votre info-bulle BS4 dans votre mise en page (ajustez la direction)

  • Enfin, ajoutez une info-bulle BS4 à votre mise en page et attribuez-lui une classe personnalisée pour plus de flexibilité. Cette ressource BS4 parle de l’utilisation du modèle en tant qu’option. Nous allons l'utiliser pour ajouter notre classe personnalisée.

  • L'exemple suivant ajoute une info-bulle sur un badge d'icône d'information:

     <span class="badge badge-pill badge-primary" data-toggle="tooltip" data-placement="right" data-html="true" data-template="<div class='tooltip mtooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner'></div></div>" title="<h1 class='text-white'>Tooltip</h1> on bottom">i</span>


Avec cette configuration, vous pouvez ajuster le nom de la classe, la couleur et la direction de votre info-bulle sans toucher à votre mixage original . À quel point cela est cool :)

J'espère que cela t'aides!

0
klewis

La réponse d'Oleg https://stackoverflow.com/a/42994192/9921853 est la meilleure parmi celles-ci . Elle permet d'appliquer les styles d'infobulle aux éléments créés dynamiquement . Cependant, cela ne fonctionne pas pour Bootstrap 4. Il devrait être légèrement modifié:

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'));
});

Exemple: https://www.bootply.com/UORR04ncTP

Bootstrap 4:

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

Exemple: https://jsfiddle.net/nsmcan/naq530hx

Solution complète (Bootstrap 3)

JS

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

$('body').tooltip({ 
    selector: "[title]", 
    html: true
});

HTML

<h1>Test tooltip styling</h1>
<div><span title="Long-long-long tooltip doesn't fit the single line">Hover over me 1</span></div>
<div><span data-tooltip-custom-classes="tooltip-left" data-container="body" title="Example (left aligned):<br>Tooltip doesn't fit the single line, and is not a sibling">Hover over me 2</span></div>
<div><span class="text-danger" data-tooltip-custom-classes="tooltip-large tooltip-left tooltip-danger" title="Example (left aligned):<br>This long text we want to have in the single line">Hover over me 3</span></div>

CSS

.tooltip.tooltip-large > .tooltip-inner {
    max-width: 300px;
}
.tooltip.tooltip-left > .tooltip-inner {
    text-align: left;
}

.tooltip.top.tooltip-danger > .tooltip-arrow {
    border-top-color: #d9534f;
}
.tooltip.top-left.tooltip-danger > .tooltip-arrow {
    border-top-color: #d9534f;
}
.tooltip.top-right.tooltip-danger > .tooltip-arrow {
    border-top-color:#d9534f;
}
.tooltip.right.tooltip-danger > .tooltip-arrow {
    border-right-color: #d9534f;
}
.tooltip.left.tooltip-danger > .tooltip-arrow {
    border-left-color: #d9534f;
}
.tooltip.bottom.tooltip-danger > .tooltip-arrow {
    border-bottom-color: #d9534f;
}
.tooltip.bottom-left.tooltip-danger > .tooltip-arrow {
    border-bottom-color: #d9534f;
}
.tooltip.bottom-right.tooltip-danger > .tooltip-arrow {
    border-bottom-color: #d9534f;
}
.tooltip.tooltip-danger > .tooltip-inner {
    background-color: #d9534f;
}
0
Sergey Nudnov

Si vous voulez utiliser jQuery vous pouvez essayer ceci:

$('[data-toggle="tooltip"]').on('shown.bs.tooltip', function(){
    $('.tooltip.bottom .tooltip-arrow').css('border-bottom-color', 'red');
    $('.tooltip-inner').css('background-color', 'red');
});
0
Indra S

Nous utilisons bootstrap 3.0 sur notre site Web, mais aucune des étapes ci-dessus n'a permis de mettre à jour le style de l'info-bulle. Mais j'ai trouvé une solution utilisant le style jQueryUI à la place

https://jqueryui.com/tooltip/#custom-style

CSS

  .ui-tooltip, .arrow:after {
    background: black;
    border: 2px solid white;
  }
  .ui-tooltip {
    padding: 10px 20px;
    color: white;
    border-radius: 20px;
    font: bold 14px "Helvetica Neue", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0 0 7px black;
  }

HTML

<div class="qu_help" data-toggle="tooltip" title="Some Random Title"> 
   <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
</div>

J'ajoute cette réponse au cas où quelqu'un d'autre se trouverait dans une situation similaire à celle que j'étais.

0
JhWebDevGuy

La seule façon de travailler pour moi:

.tooltip.bottom .tooltip-arrow{
    border-bottom-color:#F00;
}
0
Vivien

Cela a fonctionné pour moi.

.tooltip .arrow:before {
    border-top-color: #008ec3 !important;
}

.tooltip .tooltip-inner {
    background-color: #008ec3;
}
0
Madian Malfi

$(document).ready(function(){
  $('.tooltips-elements')
    .tooltip()
    .each(function() {
        var color = $(this).data('color');
        $(this).hover(function(){
        	var aria = $(this).attr('aria-describedby');
        	$('#' + aria).find('.tooltip-inner').css({
	        	"background": color,
	        	"color" : "#333",
	        	"margin-left" : "10px",
	        	"font-weight" : "700",
	        	"font-family" : "Open Sans",
	        	"font-size" : "13px",
	        });
	        $('#' + aria).find('.tooltip-arrow').css({
	        	"border-bottom-color" : color,
	        });
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<a href="#" class="tooltips-elements" data-toggle="tooltip"  data-placement="bottom" data-original-title="Here comes the tooltip" data-color="red">Hover me</a>

Vérifiez ceci peut-être que cela peut vous aider. Vous pouvez avoir plusieurs info-bulles de couleur.

0
Dragos Nitescu