Bootstrap 4 更改工具提示箭头颜色
Bootstrap 4 change tooltip arrow color
我想将工具提示箭头颜色更改为红色。我在谷歌上搜索了大约一个小时,但我发现的片段没有用。
我最后一次尝试是:
.tooltip-arrow {
border-right-color: red;
border-left-color: red;
border-bottom-color: red;
border-top-color: red;
}
工具提示位于右侧,指向左侧。
您要找的选择器是.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;
}
我正在使用 bootstrap 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;
}
Bootstrap 4.0.0 & Popper.js
左箭头工具提示:
.tooltip .tooltip-inner {
background-color: green;
}
.tooltip .arrow::before {
border-left-color: green;
}
只需添加到您的CSS。
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));
在bootstrap 4.1中你可以使用:
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
border-bottom-color: red !important;
}
.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
border-top-color: red !important;
}
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
border-left-color: red !important;
}
.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {
border-right-color: red !important;
}
我通常会像这样覆盖 bootstrap 4.3 工具提示样式,应该是 straight-forward:
/*Tooltip*/
.tooltip {
font-family: "Roboto", "Tahoma", "Helvetica", sans-serif;
}
.tooltip > .arrow::before {
border-bottom-color: #757E94;
}
.tooltip-inner {
background-color: #757E94;
color: white;
font-style: italic;
}
对于Bootstrap 4.3.1
添加到 HTML 文件
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
添加到 CSS 文件
.tooltip-inner {
background-color: red;
color: #444;
width: auto;
max-width: 150px;
font-size: 100%;
white-space: nowrap;
}
.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
border-top-color: red;
}
.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {
border-right-color: red;
}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
border-bottom-color: red;
}
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
border-left-color: red;
}
添加到 Javascript 文件
$(document).ready(function () {
$('.btn').tooltip();
});
我想将工具提示箭头颜色更改为红色。我在谷歌上搜索了大约一个小时,但我发现的片段没有用。
我最后一次尝试是:
.tooltip-arrow {
border-right-color: red;
border-left-color: red;
border-bottom-color: red;
border-top-color: red;
}
工具提示位于右侧,指向左侧。
您要找的选择器是.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;
}
我正在使用 bootstrap 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;
}
Bootstrap 4.0.0 & Popper.js
左箭头工具提示:
.tooltip .tooltip-inner {
background-color: green;
}
.tooltip .arrow::before {
border-left-color: green;
}
只需添加到您的CSS。
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));
在bootstrap 4.1中你可以使用:
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
border-bottom-color: red !important;
}
.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
border-top-color: red !important;
}
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
border-left-color: red !important;
}
.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {
border-right-color: red !important;
}
我通常会像这样覆盖 bootstrap 4.3 工具提示样式,应该是 straight-forward:
/*Tooltip*/
.tooltip {
font-family: "Roboto", "Tahoma", "Helvetica", sans-serif;
}
.tooltip > .arrow::before {
border-bottom-color: #757E94;
}
.tooltip-inner {
background-color: #757E94;
color: white;
font-style: italic;
}
对于Bootstrap 4.3.1
添加到 HTML 文件
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
添加到 CSS 文件
.tooltip-inner {
background-color: red;
color: #444;
width: auto;
max-width: 150px;
font-size: 100%;
white-space: nowrap;
}
.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
border-top-color: red;
}
.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {
border-right-color: red;
}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
border-bottom-color: red;
}
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
border-left-color: red;
}
添加到 Javascript 文件
$(document).ready(function () {
$('.btn').tooltip();
});