Change bootstrap popover background color

Я пытаюсь изменить CSS на bootstrap popover. Я хочу изменить весь фон popover, а не только текст.Change bootstrap popover background color

Любые предложения?

http://bootply.com/110002

$(document).ready(function() { 
    $("[rel='android']").popover({ 
    html: 'true', 
    content: '<div id="popOverBox">Coming March 2014</div>' 
    }); 
});

CSS

#popOverBox { 
    background: tomato; 
    font-family: serif; 
}

источник

2014-01-31 Ryan Salmons

Вы бы целевой .popover элемент в отличие от #popOverBox

EXAMPLE HERE

.popover { 
    background: tomato; 
}

И изменить фон стрелки (псевдо элемента), можно использовать:

.popover.bottom .arrow:after { 
    border-bottom-color: tomato; 
}

источник

2014-01-31 22:10:05

вышеупомянутое решение не сработало для меня, но следующее: .tooltip-inner { background-color: # D13127; цвет: #fff; } .tooltip.top .tooltip-arrow { border-top-color: # D13127; } – mcgraw

Вы говорите о всплывающей подсказке. Это еще один материал ... – ymakux

Для стрелки try .popover.top> .arrow: after { \t border-top-color: # 111; } – ymakux

Обратите внимание, что если вы используете меньше или Sass файлов, вы можете сделать следующее также:

@popover-bg: tomato;

Таким образом, не нужно беспокоиться о том, на какой стороне находится стрелка.

источник

2016-05-26 20:49:36 richinator38

Изменения поповер фон и цвет текста в Bootstrap-4

при использовании Sass-самозагрузки-4 вы можете легко сделать, просто изменив некоторые переменные значения.

Эти переменные в файле _variables.scss:

$popover-inner-padding: 1px !default; 
$popover-bg: #fff !default; 
$popover-max-width: 276px !default; 
$popover-border-width: $border-width !default; 
$popover-border-color: rgba(0, 0, 0, .2) !default; 
$popover-box-shadow: 0 5px 10px rgba(0, 0, 0, .2) !default; 

$popover-title-bg: darken($popover-bg, 3%) !default; 
$popover-title-padding-x: 14px !default; 
$popover-title-padding-y: 8px !default; 

$popover-content-padding-x: 14px !default; 
$popover-content-padding-y: 9px !default; 

$popover-arrow-width: 10px !default; 
$popover-arrow-color: $popover-bg !default; 

$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default; 
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;

я изменить их светло-голубого цвета, используя $ бренд-инфо переменной:
Примечание: его лучше, если вы копируете эти переменные в ваше собственный файл custom.scss, а затем измените их.

$popover-inner-padding: 1px !default; 
$popover-bg: #fff !default; 
$popover-max-width: 276px !default; 
$popover-border-width: $border-width !default; 
$popover-border-color: $brand-info; 
$popover-box-shadow: 0 5px 10px rgba(0, 0, 0, .2) !default; 

$popover-title-bg: $brand-info; 
$popover-title-padding-x: 14px !default; 
$popover-title-padding-y: 8px !default; 

$popover-content-padding-x: 14px !default; 
$popover-content-padding-y: 9px !default; 

$popover-arrow-width: 10px !default; 
$popover-arrow-color: $popover-bg !default; 

$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default; 
$popover-arrow-outer-color:$brand-info;

Вывод после изменения переменных:

источник

2016-12-09 06:36:06

.popover {background-color: tomato;} 
.popover.bottom .arrow::after {border-bottom-color: tomato; } 
.popover-content {background-color: tomato;}

источник

2016-12-09 07:24:41

Время прошло в любом случае я хотел бы сообщить мое личное решение в LESS (действительно, соответствует моим потребностям, но я думаю, что это может быть полезно для некоторых людей здесь). Добавьте класс class="popover", как class="popover popover-warning" и менее сделать что-то вроде этого:

.popover-warning { 
    background-color: #f0ad4e !important; 
    & .arrow, .arrow:after { 
    border-left-color: #f0ad4e !important; 
    border-left-color: rgba(0, 0, 0, 0.25); 
    } 
    & .popover-content, .popover-title { 
    background-color: #f0ad4e !important; 
    } 
}

Надеется, что это помогает.

источник

2017-08-03 08:10:38 Nineoclick

Change bootstrap popover background color

ответ

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