Изменить цвет всплывающей подсказки bootstrap
Что я пытаюсь сделать, это изменить цвет всплывающей подсказки на красный. Однако я также хочу иметь несколько других цветов, поэтому я не просто хочу заменить цвет исходной подсказки.
Как бы я это сделал?
25 ответов
вы можете использовать таким образом:
<a href="#" data-toggle="tooltip" data-placement="bottom"
title="" data-original-title="Tooltip on bottom"
class="red-tooltip">Tooltip on bottom</a>
и в CSS:
.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
Moeen MH: С самой последней версией bootstrap вам может потребоваться сделать это, чтобы избавиться от черной стрелки:
.red-tooltip + .tooltip.top > .tooltip-arrow {background-color: #f00;}
Бутстрап 2
Если вы хотите также изменить курсор / стрелку, сделайте следующее:
.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
.red-tooltip + .tooltip > .tooltip-arrow {border-bottom-color: #f00;}
или
.red-tooltip + .tooltip > .tooltip-inner, .red-tooltip + .tooltip > .tooltip-arrow {background-color: #f00;}
jsFiddle: http://jsfiddle.net/technotarek/2htZe/
обновление: Bootstrap 3
вы должны быть конкретными для направления всплывающей подсказки в Bootstrap 3. Например:
.tooltip.top .tooltip-inner {
background-color:red;
}
.tooltip.top .tooltip-arrow {
border-top-color: red;
}
jsFiddle для всех направлений подсказок с помощью Bootstrap 3: http://jsfiddle.net/technotarek/L2rLE/
единственный способ работы для меня:
$(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>
для цвета стрелки вы можете использовать следующее:
.tooltip .tooltip-arrow {border-top: 5px solid red !important;}
вот код подсказки в boostrap...
.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;
}
для bootstrap4 я использовал код:
.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;
}
мое исправление 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');
});
вы можете использовать это для решения вашей проблемы. Я проверил его в своем проекте, и он отлично работает.
<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;
}
важно отметить, что начиная с Bootstrap 4 Вы можете настроить эти стили непосредственно в файле переменных Bootstrap Sass, поэтому в _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;
смотрите здесь: http://v4-alpha.getbootstrap.com/getting-started/options/
лучше всего работать в Sass и компилировать, когда вы идете с инструментами сборки Grunt или Gulp.
вы можете использовать quickapproach, упомянутый в других ответах, если вы просто хотите изменить цвет. Однако, если вы используете Bootstrap, чем вы должны использовать темы, чтобы выглядеть и чувствовать себя последовательно. К сожалению, нет встроенной поддержки тем для Bootstrap, поэтому я написал небольшую часть CSS, которая делает это. Вы в основном получаете tooltip-info
, tooltip-warning
etc классы, которые можно добавить в элемент для применения темы.
Вы можете найти этот код вместе со скрипкой, примеры и многое другое объяснение в этом ответе:https://stackoverflow.com/a/20880312/207661
стрелка на границе.
Вам нужно изменить для каждой стрелки соответствующий цвет.
.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;
}
однако, если я хочу добавить класс для изменения цвета (например, в скрипке с '.класс. + подсказка...'это не работает (bootstrap 3).
Если кто-то знает, как с этим справиться ?!?
Bootstrap 3 + SASS для дно подсказки :
.red-tooltip {
& + .tooltip.bottom {
.tooltip-inner{background-color:$red;}
.tooltip-arrow {border-bottom-color: $red;}
}
}
для стрелки сначала подтвердите, какое направление вы используете.
Например, я использую left
направлении, то он должен быть!--3-->
.tooltip .tooltip-inner {
background-color:#2fa5fb;
}
.tooltip.left > .tooltip-arrow {
border-left-color: #2fa5fb;
}
Non из вышеуказанных ответов отлично работает в случае container: 'body'
, и следующие решения:
// 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'));
});
и простой фрагмент CSS:
.tooltip.tooltip-danger > .tooltip-inner {
background-color: #d9534f;
}
.tooltip.tooltip-danger.left > .tooltip-arrow {
border-left-color: #d9534f;
}
теперь вы можете init подсказку как обычно, передавая пользовательский класс CSS через :
<span class="js-tooltip">Hover me totally</span>
<script>
$('.js-tooltip')
.data('tooltip-custom-class', 'tooltip-danger')
.tooltip(/*your options*/)
;
</script>
Кажется, изменилось в Bootstrap 4
Если вы хотите изменить цвет нижней подсказки в красном цвете, просто добавьте это в свой CSS:
.tooltip-inner {
background-color: #f00;
}
.bs-tooltip-bottom .arrow::before {
border-bottom-color: #f00;
}
на это уже ответили правильно, но я думаю, что я тоже должен дать свое мнение. Как cozen говорит, что это граница, и для ее работы вы должны указать классы для форматирования так же, как bootstrap указывает его. Итак, вы можете сделать это
.tooltip .tooltip-inner {background-color: #00a8c4; color: black;}
.tooltip.top .tooltip-arrow {border-top-color: #00a8c4;}
или можно сделать одну, лишь для подсказки-стрелки, но вы должны добавить !важно, чтобы он перезаписывал bootstrap css
.tooltip-arrow {border-top-color: #00a8c4!important;}
вы можете использовать таким образом:
и в CSS:
.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {background-color: #000;}
он изменит цвет всплывающей подсказки в bootstrap4, которую вы можете использовать внизу, влево, вправо, чтобы добавить CSS для соответствующего вместо top in .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;
}
$(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>
проверьте это, возможно, это может вам помочь. Вы можете иметь несколько подсказок цвета.
мы используем bootstrap 3.0 на нашем веб-сайте, но ни один из вышеперечисленных шагов не работал при обновлении стиля всплывающей подсказки. Но я нашел решение, используя стиль jQueryUI вместо
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>
Я добавляю этот ответ в случае, если кто-то еще в подобной ситуации, как и я.
этот простой метод работает для меня, когда я хочу изменить цвет фона всплывающих подсказок:
$(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>
Примечание A:
если
js
код включить.data('tooltip')
не работает для Вас, пожалуйста комментировать ее строку и раскомментироватьjs
код включить.data('bs-tooltip')
.Примечание B:
если ваша функция Bootstrap tooltip добавить подсказку до конца тела (не сразу после элемента), мое решение работает, но хорошо но некоторые другие ответы на этих страницах не работают, как @Praveen Kumar и @technoTarek в этом случае.
Примечание C:
этот код поддерживать
tooltip arrow
цвет во всех местах размещения всплывающей подсказки (top
,bottom
,left
,right
).
Если вы хотите использовать jQuery вы можете попробовать это:
$('[data-toggle="tooltip"]').on('shown.bs.tooltip', function(){
$('.tooltip.bottom .tooltip-arrow').css('border-bottom-color', 'red');
$('.tooltip-inner').css('background-color', 'red');
});
для Bootstrap 4 с зависимостью от tether.js the .tooltip-классы стрелок были заменены .подсказка.bs-tether-element-attached - [позиция] {...}
вот как я изменил цвет и утолщенную нижнюю стрелку. Для каждого пикселя, добавленного к ширине границы, я должен был вычесть пиксель из "нижней" позиции.
.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;
}
вам придется настроить для других позиций, т. е. для .подсказка.bs-tether-element-attached-left вы отрегулируете границу-вправо и переместите, если увеличение ширины границы путем вычитания пикселей из "слева"и т. д.
Олег https://stackoverflow.com/a/42994192/9921853 это лучшее, что есть. Позволяет применять стили подсказок к динамически создаваемым элементам. Однако он не работает для 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'));
});
пример: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'));
});
пример: https://jsfiddle.net/nsmcan/naq530hx
Полное Решение (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;
}