Пользовательские стили (Arrow, Bg и т. Д.) В подсказках Bootstrap 4 и всплывающих окнах - PullRequest
Новая
       51

Пользовательские стили (Arrow, Bg и т. Д.) В подсказках Bootstrap 4 и всплывающих окнах

0 голосов
/ 26 марта 2019

Я копал всплывающие подсказки и всплывающие окна в Bootstrap 4, чтобы иметь возможность настраивать любой цвет стрелки или фона, текст и т. Д. Это то, что я нашел.Не стесняйтесь добавлять свой код или запрашивать конкретный результат.

Кроме того, мне очень интересно узнать, как выглядит HTML-разметка popover, отсутствующая в Bootstrap 4 Docs

Кодовая ручка, которую я создал: https://codepen.io/jaabert/pen/bZJZVp

Очень важно отметить использование (BTW)! Важный для 

.bs-tooltip-top,
.bs-tooltip-right,
.bs-tooltip-left,
.bs-tooltip-bottom {
  background-color: transparent;
  opacity: 1!important;
}

Просто для переопределения стилей B4, потому чтопо умолчанию всплывающие подсказки не являются непрозрачными на 100%.

1 Ответ

0 голосов
/ 27 марта 2019

Я обновил кодовую ручку с помощью всплывающей HTML-разметки и некоторых решений, не элегантных, а простых и эффективных простых CSS. Также будьте осторожны с псевдоэлементом style son в "bs-popover-top": 

      <div class="popover bs-popover-top show" role="tooltip">
        <div class="arrow" style="left: 50%"></div>
        <h3 class="popover-header">Popover header</h3>
        <div class="popover-body">Popover -body</div>
      </div>

https://codepen.io/jaabert/pen/bZJZVp

...