Re-color Tooltip в Bootstrap 4

Я пытаюсь переустановить/переформатировать всплывающую подсказку в Bootstrap 4, и первоначальный способ сделать это больше не работает. В настоящее время я делаю это:Re-color Tooltip в 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 - это стрелка сверху нижней выровненной подсказки.

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

источник

2016-03-21 Takuhii

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

источник

2017-08-29 13:52:38 madison

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

Обновлено, спасибо за предложение! Поскольку он все еще находится в бета-версии, я бы отметил, чтобы проверить документацию, чтобы убедиться, что всплывающие подсказки обновляются в более новой версии. у них есть статические версии, которые вы можете проверить. – madison

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

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

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

источник

2016-03-21 23:33:11 makshh

HA HA работает отлично, спасибо :) – Takuhii

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

GIT

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

источник

2017-04-07 10:30:09 marcelo2605

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

источник

2017-08-24 00:39:48 OctavioGT

Я использую bootstra p 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:56:57 kapil

Bootstrap 4.0.0 & Popper.JS

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

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

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

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

источник

2018-02-09 12:17:33

ответ

Смежные вопросы