Сентябрь 2017
Автор: Рубрика: Верстка Комментариев нет

Подсказка и всплывающее окно в bootstrap 3


Подсказка и всплывающее окно в bootstrap 3

Есть два типа подсказок в зависимости от атрибута первый тип это tooltip.

Обновим bootstrap и зайдем в index.html.

Сделаем кнопку и добавим ей всплывающую подсказку.

Добавим кнопке класс btn и зададим атрибут data-toggle=tooltip, чтобы скрипт понял, на какой кнопке запустить tooltip.

Второй атрибут это текст подсказки title=Подсказка.

Для изменения положения подсказки используем атрибут data-placement=top.

Может быть четыре варианта.

  1. top
  2. left
  3. right
  4. bottom

Чтобы проверить подсказку напишем скрипт в common.js.

Выберем все элементы с атрибутов data-toggle=tooltip и после точке пропишем метод tooltip ().

Наводим мышкой на кнопку, слева выплывет подсказка, проверим в браузере.

первый тип это tooltip в bootstrap

Второй тип подсказки в окне с атрибутом popover.

Копируем верхнюю кнопку вниз, меняем атрибут на popover.

В этой подсказке title является заголовком.

Текст размещается в атрибут data-content = Текст о кнопке popover.

Окно с подсказкой появляется только после нажатия мышкой на кнопку, можно поменять способ при наведении hover, при клике click и при фокусе focus задав атрибут data-trigger=focus.

Подключим popover в common.js.

Проверим в браузере, тут подсказка появится после нажатия мышкой на кнопку.

Подключим popover в common.js.

Такие подсказки можно применять в списках.

Есть текст в теге p и в конце будет вопросик, если на него навести мышкой, всплывет подсказка.

Стилизуем ссылку с вопросительным знаком.

подсказка в окне в списке.

Комментариев нет