Стилизация tooltip (bootstrap 4)

13.07.2018 | Написал

В bootstrap есть компонент подсказок Tooltip. По умолчанию он не активен, его необходимо подключить. Как это сделать есть в документации, труда это составить не должно. Но вот внешний вид всплывающего окна один — черный фон, светлые буквы. Изменить стили окна можно следующим образом:

/* всплывающие подсказки */
.tooltip-inner {background-color: #fff;color: #333;font-size: .875rem;-webkit-box-shadow: 0 0 .9375rem rgba(0,0,0,.25);;box-shadow: 0 0 .9375rem rgba(0,0,0,.25);border-radius:0;padding:.5rem .75rem;}
.tooltip.bs-tooltip-right .arrow:before {border-right-color: #fff !important;}
.tooltip.bs-tooltip-left .arrow:before {border-left-color: #fff !important;}
.tooltip.bs-tooltip-bottom .arrow:before {border-bottom-color: #fff !important;}
.tooltip.bs-tooltip-top .arrow:before {border-top-color: #fff !important;}

В примере мы задаем белый фон с тенью для окна, цвет и размер шрифта.

Метки: ,
Комментарии читателей статьи "Стилизация tooltip (bootstrap 4)"

Нет комментариев.

Добавить комментарий

Ваш e-mail не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.