Стилизация 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)"

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

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

Ваш адрес email не будет опубликован.

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