引導程序4更改工具提示箭頭顏色

我想將工具提示箭頭顏色更改爲紅色。我搜索了一個小時左右，發現我的代碼片段沒有工作。引導程序4更改工具提示箭頭顏色

我最後的嘗試是：

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

工具提示的位置向右，向左poiting。

來源

2017-07-06 Diego Alves

你正在尋找的選擇是.tooltip.bs-tether-element-attached-left .tooltip-inner::before：

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

如果你想每一個提示箭頭紅 - 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; 
}

來源

2017-07-06 18:50:24 tmg

您的解決方案工作。 –

我使用的引導4.0.0-beta.2。這段代碼適合我。

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

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

來源

2017-11-08 06:55:27 kapil

感謝分享。真的有幫助！ –

引導4.0.0 & Popper.js

左箭頭提示：

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

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

只需添加到您的CSS。

來源

2018-02-09 12:13:31

jQuery插件工具提示箭頭可變顏色：

(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。

來源

2018-02-13 20:25:35

引導程序4更改工具提示箭頭顏色

回答

相關問題