Повторная цветовая подсказка в Bootstrap 4

Я пытаюсь переделать/переформатировать всплывающую подсказку в Bootstrap 4, и первоначальный способ сделать это, похоже, больше не работает. В настоящее время я делаю это:

.tooltip-inner {
    background: #7abcff; 
    background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); 
    background:    -moz-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); 
    background:   linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); 
    color: #fff;
    font-family: 'Roboto', Arial, sans-serif;
}
.tooltip.top .tooltip-arrow {
    border-top-color: #7abcff;
}

.tooltip-inner работает нормально, но .tooltip.top .tooltip-arrow не работает; он остается черным. Я предполагаю, что .tooltip.top - стрелка сверху нижней выровненной подсказки.

Любая помощь будет принята с благодарностью

ОТВЕТЫ

Ответ 1

Как Bootstrap 4.0

CSS для всплывающей подсказки перерисовывается с помощью класса .tooltip-inner, как вы заметили:

.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: .25rem;
}

Css для верхней стрелки:

.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
    margin-left: -3px;
    content: "";
    border-width: 5px 5px 0;
    border-top-color: #000;
}

Css для стрелки вправо:

.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before {
    margin-top: -3px;
    content: "";
    border-width: 5px 5px 5px 0;
    border-right-color: #000;
}

Css для стрелки внизу:

.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before {
    margin-left: -3px;
    content: "";
    border-width: 0 5px 5px;
    border-bottom-color: #000;
}

Css для левой стрелки:

.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip.bs-tooltip-left .arrow::before {
    right: 0;
    margin-top: -3px;
    content: "";
    border-width: 5px 0 5px 5px;
    border-left-color: #000;
}

Ответ 2

Если вы используете SASS, проверьте файл tooltip.scss:

GIT

Чтобы изменить цвет, просто переопределите значения этих переменных: $tooltip-arrow-color и $tooltip-bg.

Ответ 3

Bootstrap 4 имеет разные классы, чем 3, вам нужно использовать:

.tooltip.tooltip-top .tooltip-arrow,
.tooltip.bs-tether-element-attached-bottom .tooltip-arrow {
  border-top-color: #7abcff;
}

Эти селектора представляют стрелку верхней выровненной всплывающей подсказки.

Ответ 4

Я использую 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;
  }

Ответ 5

Простое использование этого кода в вашем файле CSS.

.tooltip-inner {
background-color: #00cc00;
}
.tooltip.bs-tooltip-right .arrow:before {
    border-right-color: #00cc00 !important;
}
.tooltip.bs-tooltip-left .arrow:before {
    border-left-color: #00cc00 !important;
}
.tooltip.bs-tooltip-bottom .arrow:before {
    border-bottom-color: #00cc00 !important;
}
.tooltip.bs-tooltip-top .arrow:before {
    border-top-color: #00cc00 !important;
}

Ответ 6

Bootstrap 4.0.0 и Popper.js

Это минимальный код для левосторонней зеленой подсказки:

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

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

Просто добавьте его в свой CSS.

Ответ 7

Использование собственного стиля для каждой подсказки

Указанные выше решения для BS4 работают, но все они меняют стиль подсказок во всем мире. Все всплывающие подсказки будут выглядеть одинаково. Было бы намного приятнее использовать собственный стиль для каждой всплывающей подсказки, например, как для блоков предупреждений. Я понятия не имею, почему команда BS не предоставила эту функцию для всплывающих подсказок с полки.

Здравствуйте, data-container

Существует довольно простое решение, использующее опцию контейнера, которую предоставляет подсказка BS. С помощью этой опции вы можете добавить элемент всплывающей подсказки к другому конкретному элементу. Таким образом, вы можете обернуть всплывающую подсказку в другой элемент и добавить ее к нему через атрибут data-container, например так:

<span class="wrapper"><a href="#" data-toggle="tooltip" data-container=".wrapper" title="Some tooltip text!">Hover over me</a></span>

Теперь вы можете использовать элемент-обертку, чтобы стилизовать подсказку внутри него индивидуально. Например, вы хотите всплывающую подсказку в стиле "опасность". Это будет HTML:

<span class="tooltip-danger"><a href="#" data-toggle="tooltip" data-container=".tooltip-danger" title="Some tooltip text!">Hover over me</a></span>

И это будет таблица стилей:

.tooltip-danger .tooltip-inner {
   color: #721c24;
   background-color: #f8d7da;
   border: 1px solid #721c24;
}
.tooltip-danger .tooltip.bs-tooltip-top .arrow:before {
   border-top-color: #721c24;
}
.tooltip-danger .tooltip.bs-tooltip-right .arrow:before {
   border-right-color: #721c24;
}
.tooltip-danger .tooltip.bs-tooltip-bottom .arrow:before {
   border-bottom-color: #721c24;
}
.tooltip-danger .tooltip.bs-tooltip-left .arrow:before {
   border-left-color: #721c24;
}

Это будет выглядеть так:

Tooltip in "danger" style

Другая подсказка на той же странице может выглядеть так:

Tooltip in "success" style

Вы поняли идею...

Таблица стилей

И так как я уже прошел через это, вот мои стили всплывающей подсказки, основанные на стилях оповещения BS4:

.tooltip-danger .tooltip-inner {
   color: #721c24;
   background-color: #f8d7da;
   border: 1px solid #721c24;
}
.tooltip-danger .tooltip.bs-tooltip-top .arrow:before {
   border-top-color: #721c24;
}
.tooltip-danger .tooltip.bs-tooltip-right .arrow:before {
   border-right-color: #721c24;
}
.tooltip-danger .tooltip.bs-tooltip-bottom .arrow:before {
   border-bottom-color: #721c24;
}
.tooltip-danger .tooltip.bs-tooltip-left .arrow:before {
   border-left-color: #721c24;
}

.tooltip-dark .tooltip-inner {
   color: #1b1e21;
   background-color: #d6d8d9;
   border: 1px solid #1b1e21;
}
.tooltip-dark .tooltip.bs-tooltip-top .arrow:before {
   border-top-color: #1b1e21;
}
.tooltip-dark .tooltip.bs-tooltip-right .arrow:before {
   border-right-color: #1b1e21;
}
.tooltip-dark .tooltip.bs-tooltip-bottom .arrow:before {
   border-bottom-color: #1b1e21;
}
.tooltip-dark .tooltip.bs-tooltip-left .arrow:before {
   border-left-color: #1b1e21;
}

.tooltip-info .tooltip-inner {
   color: #0c5460;
   background-color: #d1ecf1;
   border: 1px solid #0c5460;
}
.tooltip-info .tooltip.bs-tooltip-top .arrow:before {
   border-top-color: #0c5460;
}
.tooltip-info .tooltip.bs-tooltip-right .arrow:before {
   border-right-color: #0c5460;
}
.tooltip-info .tooltip.bs-tooltip-bottom .arrow:before {
   border-bottom-color: #0c5460;
}
.tooltip-info .tooltip.bs-tooltip-left .arrow:before {
   border-left-color: #0c5460;
}

.tooltip-light .tooltip-inner {
   color: #818182;
   background-color: #fefefe;
   border: 1px solid #818182;
}
.tooltip-light .tooltip.bs-tooltip-top .arrow:before {
   border-top-color: #818182;
}
.tooltip-light .tooltip.bs-tooltip-right .arrow:before {
   border-right-color: #818182;
}
.tooltip-light .tooltip.bs-tooltip-bottom .arrow:before {
   border-bottom-color: #818182;
}
.tooltip-light .tooltip.bs-tooltip-left .arrow:before {
   border-left-color: #818182;
}

.tooltip-primary .tooltip-inner {
   color: #004085;
   background-color: #cce5ff;
   border: 1px solid #004085;
}
.tooltip-primary .tooltip.bs-tooltip-top .arrow:before {
   border-top-color: #004085;
}
.tooltip-primary .tooltip.bs-tooltip-right .arrow:before {
   border-right-color: #004085;
}
.tooltip-primary .tooltip.bs-tooltip-bottom .arrow:before {
   border-bottom-color: #004085;
}
.tooltip-primary .tooltip.bs-tooltip-left .arrow:before {
   border-left-color: #004085;
}

.tooltip-secondary .tooltip-inner {
   color: #383d41;
   background-color: #e2e3e5;
   border: 1px solid #383d41;
}
.tooltip-secondary .tooltip.bs-tooltip-top .arrow:before {
   border-top-color: #383d41;
}
.tooltip-secondary .tooltip.bs-tooltip-right .arrow:before {
   border-right-color: #383d41;
}
.tooltip-secondary .tooltip.bs-tooltip-bottom .arrow:before {
   border-bottom-color: #383d41;
}
.tooltip-secondary .tooltip.bs-tooltip-left .arrow:before {
   border-left-color: #383d41;
}

.tooltip-success .tooltip-inner {
   color: #155724;
   background-color: #d4edda;
   border: 1px solid #155724;
}
.tooltip-success .tooltip.bs-tooltip-top .arrow:before {
   border-top-color: #155724;
}
.tooltip-success .tooltip.bs-tooltip-right .arrow:before {
   border-right-color: #155724;
}
.tooltip-success .tooltip.bs-tooltip-bottom .arrow:before {
   border-bottom-color: #155724;
}
.tooltip-success .tooltip.bs-tooltip-left .arrow:before {
   border-left-color: #155724;
}

.tooltip-warning .tooltip-inner {
   color: #856404;
   background-color: #fff3cd;
   border: 1px solid #856404;
}
.tooltip-warning .tooltip.bs-tooltip-top .arrow:before {
   border-top-color: #856404;
}
.tooltip-warning .tooltip.bs-tooltip-right .arrow:before {
   border-right-color: #856404;
}
.tooltip-warning .tooltip.bs-tooltip-bottom .arrow:before {
   border-bottom-color: #856404;
}
.tooltip-warning .tooltip.bs-tooltip-top .arrow:before {
   border-left-color: #856404;
}

Надеюсь, это поможет. С наилучшими пожеланиями,

Джордж

Ответ 8

Bootstrap v4.0.0-beta

data-toggle="tooltip" data-placement="right"

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

.tooltip-inner{ color:#000; font-weight:400;  background-color:#94C120;}
.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before { border-right-color: #94C120;}

Ответ 9

Очень простой способ изменить их - переопределить переменные по умолчанию:

$tooltip-opacity: $some_number; $tooltip-arrow-color: $some_color; $tooltip-bg: $some_color;