Bootstrap 4 Modifier l'info-bulle flèche couleur

Question

Je souhaite que la couleur de la flèche de l'info-bulle devienne rouge. J'ai googlé pendant une heure et les extraits que j'ai trouvés n'ont pas fonctionné.

Ma dernière tentative a été:

.tooltip-arrow { 
    border-right-color: red; 
    border-left-color: red; 
    border-bottom-color: red; 
    border-top-color: red; 
} 

L'infobulle est positionné à droite, poiting gauche.

Answer 1

Le sélecteur que vous recherchez est .tooltip.bs-tether-element-attached-left .tooltip-inner::before:

.tooltip.bs-tether-element-attached-left .tooltip-inner::before { 
    border-right-color: red; 
} 

Si vous voulez que chaque infobulle flèche rouge - jsfiddle:

.tooltip.bs-tether-element-attached-bottom .tooltip-inner::before { 
    border-top-color: red; 
} 

.tooltip.bs-tether-element-attached-top .tooltip-inner::before { 
    border-bottom-color: red; 
} 

.tooltip.bs-tether-element-attached-left .tooltip-inner::before { 
    border-right-color: red; 
} 

.tooltip.bs-tether-element-attached-right .tooltip-inner::before { 
    border-left-color: red; 
} 

Answer 2

J'utilise bootstrap 4.0.0-beta.2. et ce code a fonctionné pour moi.

.tooltip.bs-tooltip-bottom .tooltip-inner { 
    background:#444 !important; 
} 

.tooltip .arrow:before { 
border-bottom-color:#444 !important; 
border-top-color:#444 !important; 
} 

Answer 3

Bootstrap 4.0.0 & Popper.js

infobulle fléchée gauche:

.tooltip .tooltip-inner { 
    background-color: green; 
} 

.tooltip .arrow::before { 
    border-left-color: green; 
} 

il suffit d'ajouter à votre CSS.

Answer 4

plugin jQuery pour la couleur variable infobulle flèche:

(function($) { 
    $.fn.colortips = function(){ 
     return this.each(function() { 
      var tt = $(this); 
      tt.on('focus mouseenter', function(){ 
      var bc = tt.css('background-color'); 
      var tc = (tt.data('color')===undefined || tt.data('color')==='') ? '' : tt.data('color'); 
      var pt = tt.data('placement'); 
      $('.bs-tooltip-bottom.show .tooltip-inner').css({ 
       'background-color': bc, 
       'color': tc 
      }); 
      $('<style id="colortips-style">.bs-tooltip-bottom.show .arrow::before{border-'+pt+'-color: '+bc+';}</style>') 
       .appendTo('head'); 
      }).on('focusout mouseleave', function(){ 
      $('.bs-tooltip-bottom.show .tooltip-inner').css({ 
       'background-color': '', 
       'color': '' 
      }); 
      $('#colortips-style').remove(); 
      }); 
     }); 
    } 
}(jQuery)); 

See example.