Есть два типа подсказок в зависимости от атрибута первый тип это tooltip.
Обновим bootstrap и зайдем в index.html.
Сделаем кнопку и добавим ей всплывающую подсказку.
Добавим кнопке класс btn и зададим атрибут data-toggle=tooltip, чтобы скрипт понял, на какой кнопке запустить tooltip.
Второй атрибут это текст подсказки title=Подсказка.
Для изменения положения подсказки используем атрибут data-placement=top.
Может быть четыре варианта.
- top
- left
- right
- bottom
|
1 2 |
<button class="btn1" data-toggle="tooltip" data-trigger="click" data-placement="right" title="Подсказка"> <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>Кнопка tooltop</button> |
Чтобы проверить подсказку напишем скрипт в common.js.
Выберем все элементы с атрибутов data-toggle=tooltip и после точке пропишем метод tooltip ().
|
1 2 3 |
$(function() { $('[data-toggle="tooltip"]').tooltip(); }); |
Наводим мышкой на кнопку, слева выплывет подсказка, проверим в браузере.
Второй тип подсказки в окне с атрибутом popover.
Копируем верхнюю кнопку вниз, меняем атрибут на popover.
В этой подсказке title является заголовком.
Текст размещается в атрибут data-content = Текст о кнопке popover.
Окно с подсказкой появляется только после нажатия мышкой на кнопку, можно поменять способ при наведении hover, при клике click и при фокусе focus задав атрибут data-trigger=focus.
|
1 2 3 |
<button type="button" class="btn2" data-toggle="popover" data-trigger="hover" data-placement="right" title="Заголовок" data-content="Текст о кнопке popover"> <i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>кнопка popover</button> |
Подключим popover в common.js.
|
1 2 3 |
$(function() { $('[data-toggle="popover"]').popover(); }); |
Проверим в браузере, тут подсказка появится после нажатия мышкой на кнопку.
Такие подсказки можно применять в списках.
Есть текст в теге p и в конце будет вопросик, если на него навести мышкой, всплывет подсказка.
|
1 2 |
p>Адаптивная верстка <a href="#" class="box" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Дизайн рисуется сразу на 4 разрешения - 1680 пикс., 1280 пикс., 960 пикс. и 520 пикс">?</a></p> |
Стилизуем ссылку с вопросительным знаком.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.box text-decoration: none display: inline-block position: relative top: -3px width: 15px line-height: 15px background-color: #d7d7d7 border-radius: 100% color: #8b8b8b font-family: MullerExtraBold font-size: 10px font-weight: 400 text-align: center &:hover text-decoration: none background-color: #8b8b8b color: #d7d7d7 |
