Изменить цвет всплывающей подсказки Bootstrap

126

Я пытаюсь изменить цвет всплывающей подсказки на красный. Однако я также хочу иметь несколько других цветов, поэтому я не хочу просто заменять исходный цвет всплывающей подсказки.

Как бы я это сделал?

html css twitter-bootstrap Джон Смит
источник
Возможный дубликат стилизации стрелки во всплывающих подсказках начальной загрузки
вишну 09
посмотрите на этот ответ: stackoverflow.com/a/38279489/3554107 . Для стилизации каждой стрелки направления мы должны выбрать каждую стрелку с помощью селектора атрибутов CSS, а затем стилизовать их индивидуально.
vishnu 09
Пользовательские стили для каждой всплывающей подсказки Я только что опубликовал здесь довольно простое решение ...
Джордж

Ответы:

181

Вы можете использовать этот способ:

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

jsFiddle

Моин МХ : В самой последней версии бутстрапа вам может понадобиться сделать это, чтобы избавиться от черной стрелки:

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

Используйте это для Bootstrap 4:

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

Полный фрагмент:

$(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>
Развернуть фрагмент

Правин Кумар Пурушотаман
источник
4
Однозначно все еще черная стрелка. Вы также должны изменить цвет с помощью.red-tooltip + .tooltip > .tooltip-arrow {background-color: #f00;}
Fizzix
1
Gawd! Виноват!!! Исправлена. @codesnooker не заметил, что вы упомянули стрелку !!! Очень жаль!!!
Правин Кумар Пурушотаман
4
В самой последней версии bootstrap вам может потребоваться сделать это, чтобы избавиться от черной стрелки: .red-tooltip + .tooltip.top > .tooltip-arrow {background-color: #f00;}
Moein
4
Это решение хорошо, если вы оставите параметр всплывающей подсказки по containerумолчанию. Однако, если вы сделаете container: "body"так, чтобы всплывающая подсказка не обрезалась при переполнении, это сломает селектор css.
Легкий
1
@PraveenKumar Ваш ответ / скрипка послужили для меня цели сегодня ;-) Была похожая проблема, которую я не мог понять, поэтому я решил, что я бы "Google", так сказать . Cheers
Funk Forty Niner
109

Bootstrap 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/

technoTarek
источник
Скрипка не работает, и я не вижу, чтобы курсор изменился с помощью этого кода.
Don
@Don Ссылки github на css и js больше не работали; обновлен для использования Bootstrap CDN (устаревшая версия).
technoTarek
Ничего из этого не сработало для меня, но решение Tuyen работает.
Tillito
@technoTarek Проблема с левым, правым и верхним размещением. проверьте отредактированный jsFiddle
Anurag
@Anurag Ваша скрипка не использует предложенное мной решение. Вот мое решение для всех направлений с использованием ваших html и js, но мой css: jsfiddle.net/technotarek/nhvvqz4v
technoTarek
61

Единственный способ работы для меня:

$(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>
Развернуть фрагмент

Туен Цао
источник
Единственное решение, которое сработало для меня при всех размещениях всплывающей подсказки :). Спасибо!
Анураг,
Должен был быть принятый ответ. Читателю было бы полезно, если бы вы могли добавить jsFiddle.
Anurag
12

Для 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;
}
Развернуть фрагмент

GOTOLR
источник
11

Вот код всплывающей подсказки в 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;
}
Julior
источник
10

Для цвета стрелки вы можете использовать это:

.tooltip .tooltip-arrow {border-top: 5px solid red !important;}
zvictor
источник
7

Важно отметить, что начиная с 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.

Эрик Гротке
источник
Вы также можете установить цвет с помощью bootstrap 3 с помощью $ tooltip-color, $ tooltip-bg и $ tooltip-arrow-color
Woraphot Chokratanasombat
6

мое исправление 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');
});
Dreal
источник
4

Вы можете использовать это для решения своей проблемы. Я проверил это в своем проекте, и он отлично работает.

<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;
    }
Актер Хуссейн
источник
4

На это уже был дан правильный ответ, но я думаю, что тоже должен высказать свое мнение. Подобно тому, как cozen говорит, что это граница, и чтобы она работала, вы должны указать классы для ее форматирования так же, как это задает bootstrap. Итак, вы можете это сделать

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

или вы можете сделать следующий, только для стрелки всплывающей подсказки, но вы должны добавить! important, чтобы он перезаписал загрузочный css

.tooltip-arrow {border-top-color: #00a8c4!important;}
Пауло Борральо Мартинс
источник
4

Это сработало для меня.

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

.tooltip .tooltip-inner {
    background-color: #008ec3;
}
Мадиан Мальфи
источник
1
Ни одно другое решение не помогло мне. Но ваше решение сработало для меня. Спасибо! :)))
Аспин Лим
3

Ни один из вышеперечисленных ответов отлично работает в случае 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;
}

Теперь вы можете запустить всплывающую подсказку как обычно, передав собственный класс CSS через 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>
Олег
источник
3

BootStrap 4

При использовании BootStrap 4 всплывающая подсказка добавляется в конец основного тега. Если ваша всплывающая подсказка является дочерней по отношению к другому тегу, невозможно настроить таргетинг на всплывающую подсказку с помощью css. Единственный способ, который, как я обнаружил, работает, - это использовать событие Insert.bs.tooltip и добавлять класс во внутренний div и стрелку. Затем вы можете настроить таргетинг на класс в 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>
Развернуть фрагмент

Kokomo
источник
Это рабочее решение для Bootstrap 4. Совет: если вы, как и я, используете руководство по триггеру всплывающей подсказки (т.е. всплывающая подсказка всегда отображается), используйте любой другой атрибут html, потому что использование 'data-toggle' вызовет отображение / скрытие событие с наведением курсора мыши.
mizerablebr
2

Вы можете использовать быстрый подход, упомянутый в других ответах, если вы просто хотите изменить цвет. Однако, если вы используете Bootstrap, вам следует использовать темы, чтобы внешний вид был согласованным. К сожалению, для Bootstrap нет встроенной поддержки тем, поэтому я написал небольшой фрагмент CSS, который делает это. Вы в основном получаете tooltip-info, и tooltip-warningт.д. классы , которые можно добавить к элементу , чтобы применить тему.

Вы можете найти этот код вместе со скрипкой, примерами и дополнительными объяснениями в этом ответе: https://stackoverflow.com/a/20880312/207661

Шитал Шах
источник
2

Вы можете использовать этот способ:

И в CSS:

.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {background-color: #000;}
Сандип
источник
2

Стрелка - это граница.
Вам нужно изменить для каждой стрелки соответствующий цвет.

.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;
}

Однако, если я хочу добавить класс для изменения цвета (как в скрипке с '.class + .tooltip ...', он не работает (bootstrap 3).
Если кто-то знает, как с этим справиться?!?

C0ZEN
источник
2

Bootstrap 3 + SASS для нижней подсказки:

.red-tooltip {
    & + .tooltip.bottom {
          .tooltip-inner{background-color:$red;}
          .tooltip-arrow {border-bottom-color: $red;}
    }
}
Bertrand
источник
2

Для стрелки сначала подтвердите, какое направление вы используете. Например, я использую leftнаправление, тогда оно должно быть

.tooltip .tooltip-inner {
    background-color:#2fa5fb;
}
.tooltip.left > .tooltip-arrow {
   border-left-color: #2fa5fb;
}
Амир Икбал
источник
2

Кажется, изменилось в Bootstrap 4

Если вы хотите изменить цвет всплывающей подсказки внизу на красный, просто добавьте это в свой CSS:

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

.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #f00;
}
Дэвид
источник
1

Это изменит цвет всплывающей подсказки в bootstrap4, вы можете использовать bottom, left, right, чтобы добавить CSS для соответствующего вместо вершины в .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;
}
Manish
источник
bootstrap 4 работает, проверьте размещение CSS.
Manish
немного объясни свой ответ. может помочь другим
coder
1

Вот код SCSS (скомпилированный css ниже), который поможет вам легко управлять цветами всплывающей подсказки, включая стрелку (а также границу и фон для стрелки):

Примечание: вам может потребоваться добавить «важный» в некоторых местах, чтобы правила CSS вступили в силу. Примечание № 2: стиль здесь работает только для макетов всплывающих подсказок TOP и BOTTOM. Не стесняйтесь добавить еще несколько стилей (& .bs-tooltip-left, & .bs-tooltip-right и т. Д.)

SCSS :

$tt-text-color: lime;
$tt-border-color: lime;
$tt-bg-color: black;
$arrow-border-color: lime;
$arrow-bg-color: black;

.tooltip {
  .tooltip-inner {
    background: $tt-bg-color;
    color: $tt-text-color;
    border: 2px solid $tt-border-color;
  }
  .arrow {
    width: 11px;
    height: 11px;
    border: 2px solid $arrow-border-color;
    bottom: 1px;
    &:before {
      width: 11px;
      height: 11px;
      background: $arrow-bg-color;
      border: 0;
    }
  }
  &.bs-tooltip-top {
    .arrow {
      transform: rotate(-135deg);
    }
  }
  &.bs-tooltip-bottom {
    .arrow {
      transform: rotate(135deg);
      top: 2px;
    }
  }
}

CSS :

.tooltip .tooltip-inner {
  background: black;
  color: lime;
  border: 2px solid lime;
}
.tooltip .arrow {
  width: 11px;
  height: 11px;
  border: 2px solid lime;
  bottom: 1px;
}
.tooltip .arrow:before {
  width: 11px;
  height: 11px;
  background: black;
  border: 0;
}
.tooltip.bs-tooltip-top .arrow {
  transform: rotate(-135deg);
}
.tooltip.bs-tooltip-bottom .arrow {
  transform: rotate(135deg);
  top: 2px;
}

Живой пример:

jQuery(document).ready(function(){
 $('a').tooltip();
});
.tooltip .tooltip-inner {
  background: black;
  color: lime;
  border: 2px solid lime;
}
.tooltip .arrow {
  width: 11px!important;
  height: 11px!important;
  border: 2px solid lime;
  bottom: 1px;
}
.tooltip .arrow:before {
  width: 11px;
  height: 11px;
  background: black;
  border: 0;
}
.tooltip.bs-tooltip-top .arrow {
  transform: rotate(-135deg);
}
.tooltip.bs-tooltip-bottom .arrow {
  transform: rotate(135deg);
  top: 2px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>

<div class="text-center py-4">
<a class="cn-box big cn-copy" data-toggle="tooltip" data-placement="bottom" title="Hello There">
  try me
</a>
</div>
Развернуть фрагмент

Надав
источник
0

Единственный способ работы для меня:

.tooltip.bottom .tooltip-arrow{
    border-bottom-color:#F00;
}
Вивьен
источник
0 

$(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>
Развернуть фрагмент

Проверьте это, возможно, это поможет вам. У вас может быть несколько цветов всплывающих подсказок.

Драгош Нитеску
источник
0

Мы используем 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>

Я добавляю этот ответ на тот случай, если кто-то еще окажется в такой же ситуации, как и я.

JhWebDev
источник
0

Этот простой метод работает для меня, когда я хочу изменить цвет фона всплывающих подсказок начальной загрузки:

$(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>
Развернуть фрагмент

Примечание А:

Если js код include .data('tooltip')не работает для вас, прокомментируйте его строку и раскомментируйте js код include .data('bs-tooltip').

Примечание B:

Если ваша функция всплывающей подсказки начальной загрузки добавляет всплывающую подсказку в конец тела (не сразу после элемента) , мое решение все еще работает хорошо, но некоторые другие ответы на этих страницах не работают, как @Praveen Kumar и @technoTarek в этом сценарии.

Примечание C:

Эта поддержка кодов tooltip arrowцвета во всех размещениях подсказки ( top, bottom, left, right).

ОЗУ
источник
0

Если вы хотите использовать jQuery, вы можете попробовать следующее:

$('[data-toggle="tooltip"]').on('shown.bs.tooltip', function(){
    $('.tooltip.bottom .tooltip-arrow').css('border-bottom-color', 'red');
    $('.tooltip-inner').css('background-color', 'red');
});
Индра С
источник
0

Для Bootstrap 4 с зависимостью от tether.js классы .tooltip-arrow были заменены на .tooltip.bs-tether-element-connected- [position] {...}

Вот как я изменил цвет и утолщил нижнюю стрелку. Для каждого пикселя, добавленного к ширине границы, мне приходилось вычитать пиксель из «нижней» позиции.

.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;
}

Вам нужно будет отрегулировать другие позиции, то есть для .tooltip.bs-tether-element-connected-left вы должны отрегулировать border-right и изменить положение, если увеличиваете ширину границы, вычитая пиксели из «левого» и т. Д.

deusoz
источник
Я не упомянул еще об одном аспекте: при увеличении ширины границы элемента троса также необходимо переместить обратно в центр, используя стиль поля, поэтому для изменения границы с 5 пикселей по умолчанию на 10 пикселей мне также пришлось изменить значение по умолчанию margin-left: -5px; к марже слева: -10px;
deusoz
0

Ответ Олега https://stackoverflow.com/a/42994192/9921853 там лучший. Это позволяет применять стили всплывающих подсказок к динамически создаваемым элементам. Однако это не работает для Bootstrap 4. Его следует немного изменить:

Бутстрап 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

Бутстрап 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;
}
Сергей Нуднов
источник
0

для версии Bootstrap 4 через CSS:

если вы хотите изменить цвет фона воздушного шара :

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

если вы хотите изменить стрелку, когда она отображается в нижнем положении :

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

Надеюсь помочь вам

залп
источник
0

Если в вашем проекте BS4 вы можете скомпилировать код SASS, вы можете воспользоваться преимуществом создания миксина для управления цветовой схемой всплывающих подсказок с любого направления.

Преимущества такого подхода:

  • Вам не нужно добавлять дополнительные javaScript / jQuery для чего-то, что связано со стилем.
  • Вы используете SASS для динамической обработки брендов за вас.
  • Вы можете легко контролировать, какие всплывающие подсказки имеют какой цвет (а) и направление (а).

Вот один из множества способов реализовать это:

Создайте свой оригинальный миксин:

  • Укажите переменную для цвета
  • Задайте 2 параметра (один для имени настраиваемого класса всплывающей подсказки, а другой для цвета). Я также добавляю для этих параметров значения по умолчанию (необязательно).

  • Создайте список и переберите его, чтобы охватить все 4 возможных направления

    //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;
        }
     }
  }
}


Вызовите свой миксин (настройте имя и цвет класса)

  • В вашем основном файле .scss вызовите миксин следующим образом:

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


Установите всплывающую подсказку BS4 в макете (отрегулируйте направление)

  • Наконец, добавьте всплывающую подсказку BS4 в свой макет и дайте ей настраиваемый класс для гибкости. В этом ресурсе BS4 говорится об использовании шаблона в качестве опции. Мы будем использовать это, чтобы добавить наш собственный класс.

  • В следующем примере всплывающая подсказка добавляется к значку информационного значка:

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


С помощью этой настройки вы можете настроить имя класса, цвет и направление всплывающей подсказки, не касаясь исходного миксина . Как это круто :)

Надеюсь это поможет!

klewis
источник