Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы Bootstrap 3 » Всплывающие подсказки. Основы bootstrap 3 для начинающих. Урок №19

28.09.2016


11:59


3463


пока нет


Всплывающие подсказки. Основы bootstrap 3 для начинающих. Урок №19

Всплывающие подсказки. Основы bootstrap 3 для начинающих. Урок №19

Всем привет!
В сегодняшнем уроке вы научитесь создавать всплывающие подсказки.
Используя Bootstrap, вы сможете с легкостью сделать этот эффект. А что это за эффект, рассказываю уже прямо сейчас.
Припустим, на сайте есть ссылка или кнопки. При наведении на них всплывает маленькая подсказка с левой, с правой, с нижней или с верхней стороны. У вас, наверное, сейчас вот такой вот вид :o. Понимаю, словами этот эффект тяжело объяснить, потому показываю на примере.

Пример на кнопках (наведите на объект мышкой):



Пример с ссылками (наведите на объект мышкой):


Подсказка слева

Подсказка вверху

Подсказка внизу

Подсказка справа

Теперь сам код, который нужно вставить в ваш файл.

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Подсказка слева</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Подсказка вверху</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Подсказка внизу</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Подсказка справа</button>

Обратите внимание на кнопки с такими атрибутами:

data-toggle="tooltip" data-placement="left" title="Tooltip on left"

title="Tooltip on left" – сюда пишем подсказку, которая будет появляться при наведении на нее мышки.

data-placement="left" – здесь указываем, с какой стороны должна появиться подсказка:

  • Left – с левой стороны
  • Right - с правой стороны
  • Top – свверху
  • Bottom - снизу

Кстати, эти атрибуты прописать можно не только к кнопкам, но и к ссылкам:

<a href="http://stepkinblog.ru/" data-toggle="tooltip" data-placement="bottom" title="классный блог " >Ссылка</a>

Теперь осталось чуть-чуть.
Добавьте вот этот код в <head></head> или в самый низ перед тегом </body>:

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<script type='text/javascript'>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>

Жду вас на следующих уроках. Подписывайтесь на обновления блога.



Случайные записи:

  1. Комментарии в CSS коде. Основы CSS для начинающих. Урок №4
  2. Как проверить HTML форму. Основы HTML для начинающих. Урок №19
  3. Альтернативный синтаксис управляющих структур. Основы PHP с нуля. Урок №15
  4. Оформление текста в CSS. Основы CSS для начинающих. Урок №5
  5. Как сделать фон в HTML-странице. Основы HTML для начинающих. Урок №12

Последние записи рубрики:

  1. Бесплатный курс по основам Bootstrap3
  2. Создание простого сайта на Bootstrap 3. Практика по пройденному материалу
  3. Тесты Bootstrap 3 онлайн. Основы Bootstrap 3 для начинающих
  4. Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26
  5. Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245