StepkinBlog.ru
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
28.09.2016
11:59
6529
пока нет
Всплывающие подсказки. Основы bootstrap 3 для начинающих. Урок №19
Всем привет!
В сегодняшнем уроке вы научитесь создавать всплывающие подсказки.
Используя Bootstrap, вы сможете с легкостью сделать этот эффект. А что это за эффект, рассказываю уже прямо сейчас.
Припустим, на сайте есть ссылка или кнопки. При наведении на них всплывает маленькая подсказка с левой, с правой, с нижней или с верхней стороны. У вас, наверное, сейчас вот такой вот вид 
. Понимаю, словами этот эффект тяжело объяснить, потому показываю на примере.
Пример на кнопках (наведите на объект мышкой):
Пример с ссылками (наведите на объект мышкой):
Подсказка слева
Теперь сам код, который нужно вставить в ваш файл.
<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>
Жду вас на следующих уроках. Подписывайтесь на обновления блога.