Доброго времени суток, верные читатели моего обучающего блога и гости сайта. В сегодняшней публикации вы познакомитесь с таким элементом, как Bootstrap Tooltip Plagin. Это небольшой, но достаточно полезный плагин, который отображает пользователям всплывающие подсказки.
Чтобы детально узнать обо всех преимуществах инструмента, я расскажу вам, как его подключать и правильно позиционировать на html-страницах, какие атрибуты стоит использовать, а также расскажу о методах, событиях и конечно же приведу примеры. Приступим же!
Знакомство с Tooltip
Для начала давайте разберем что под собой подразумевает Bootstrap Tooltip. Это зачастую маленькое всплывающее окошко, которое появляется при наведении курсора мышки на определенный объект веб-страницы. В таких окнах прописывают подсказки пользователям.
Для того чтобы появлялось вспомогательное окно, нужно в атрибутах элемента прописать:
data-toggle="tooltip"
, а также в title указать всплывающий текст, например,
title= «I’m a pop-up box!»
Вот как будет выглядеть полноценная строка кода:
<a href="#" data-toggle="tooltip" title=" I’m a pop-up box!»">Наведи на меня!</a>
А теперь все направили свое внимание на этот абзац!! Хочу отметить один важный момент! Вы обязательно должны подключить библиотеку jQuery и вызвать в скрипте метод tooltip (). Без этого действия инструмент не работает. Программная реализация скрипта будет выглядеть следующим образом:
1 2 3 4 5 | <script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script> |
Думаю, в данной части статьи стоит привести конкретный пример реализации всплывающей подсказки.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html lang="en"> <head> <title>First example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> /*Если необходимо реализовать только всплывающие окна, то можно подключить отдельно tooltip.js вместо bootstrap.js или bootstrap.min.js */ <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Hover your mouse over the image!</h2> <a href="#" data-toggle="tooltip" title="Meow-Meow!"><img src="http://www.nokiaplanet.com/uploads/posts/2015-11/1448881894_cute-kitty-360x640.jpg" alt="cat" width="145px"/></a> </div> <script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script> </body> </html> |
Позиционирование всплывающих подсказок
Как видно из примера, по умолчанию в стилях прописано размещать элемент тултипа сверху. Однако вы можете изменить позиционирование через атрибут data-placement, задав ему одно из ключевых слов: bottom, left, right или top. Чтобы сравнить результаты выполнения кода с указанным атрибутом, добавьте его к уже перечисленным в теге <a>:
<a href="#" data-toggle="tooltip" data-placement="right" title="Meow-Meow!"><img src="https://www.nokiaplanet.com/uploads/posts/2015-11/1448881894_cute-kitty-360×640.jpg" alt="cat" width="145px"/></a>
Что еще умеет плагин Bootstrap-a?
Мы разобрали с вами всего лишь крупицу по сравнению с тем, что умеет изучаемый элемент. А если покопаться глубже, то можно найти множество полезных параметров, которые позволяют гибко и быстро управлять всплывающими окнами.
Их можно использовать как в библиотеке jQuery, так и в html-разметке, дописав наименование опции после «data-». Именно поэтому я структурировал все существующие инструменты в табличное представление.
Наименование | Предназначение | Значение по умолчанию |
animation | Добавляет эффект затухания при появлении и скрытии подсказки. Может быть true и false. | true |
delay | В такой способ устанавливается задержка на появление и закрытие всплывающего окна. Можно указать как число, так и объект, т.е. delay: {show: 750, hide: 200}. | 0 |
container | Добавляет подсказки к конкретным элементам веб-страницы. К примеру, container: «div». | false |
html | При указании значения true распознает теги языка разметки. | false |
selector | Добавляет подсказки к конкретным селекторам. | false |
title | Вставляет текстовый контент, который впоследствии будет отображаться в появляющемся окне. | «» |
viewport | Выводит всплывающие полсказки в пределах границ указанных элементов. | {selector: «body», padding: 0} |
trigger | Определяет каким способом будет запускаться показ сообщения:
· Click – по щелчку мыши; · Focus – когда элемент будет находится в фокусе (клик, переход по Tab-у и т.д.); · Hover – при наведении курсора на объект. Можно комбинировать значения, разделяя их пробелом. |
«hover focus» |
Поговорим о методах и событиях
Помимо перечисленных опций создатели фреймворка включили и такие инструменты управления, как методы и события. Их используют в коде jQuery.
Всего существует 5 методов. Все они приписываются к указанному элементу веб-страницы. Например:
$(document).ready (function (){
$('.MyElement').tooltip ({title: «Hello!», placement: «bottom»});
});
Метод | Описание |
.tooltip (options) | Указывает какие опции (любые из рассмотренных в предыдущей таблице) будут использоваться в коде. |
.tooltip («show») | Отображает подсказку. |
.tooltip («toggle») | Переключает (включает/выключает) показ всплывающего сообщения. |
.tooltip («hide») | Скрывает появившееся окно. |
.tooltip («destroy») | Скрывает и уничтожает сообщение. |
Теперь перейдем к событиям. Их всего 4 и касаются они, как вы уже возможно догадались, только действий отображения и скрытия подсказки. События нужны для того, чтобы в определенный момент выполнить какие-то дополнительные действия.
Событие | Момент использования |
show.bs.tooltip | Событие выполнится, когда подсказка должна будет отобразиться (перед самим ее показом). |
shown.bs.tooltip | Выполнение действий произойдет после окончания вывода сообщения (окно полностью появилось и отображается на экране). |
hide.bs.tooltip | Событие выполнится перед скрытием подсказки. |
hidden.bs.tooltip | Выполнение дополнительных действий произойдет после полного скрытия окна. |
Для закрепления полученного материала разберите контрольный пример. Внимательные читатели с легкостью найдут реализованные методы, два события, а также обратят внимание на несколько измененное css-оформление.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <!DOCTYPE html> <html lang="en"> <head> <title>First example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> h2 {color: #8B8970;} img { border-radius: 25%; width: 175px; } button { margin-left: 20px; width: 85px; } </style> </head> <body> <div class="container"> <h2>Hover your mouse over the image!</h2> <div> <a href="#" data-toggle="tooltip" title="Meow-Meow!"><img src="http://www.nokiaplanet.com/uploads/posts/2015-11/1448881894_cute-kitty-360x640.jpg" alt="cat"/></a> <button type="button" class="btn btn-primary">Show</button> <button type="button" class="btn btn-warning">Hide</button> <button type="button" class="btn btn-success">Toggle</button> <button type="button" class="btn btn-danger">Destroy</button> </div> </div> <script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); $(".btn-primary").click(function(){ $("[data-toggle='tooltip']").tooltip('show'); }); $(".btn-warning").click(function(){ $("[data-toggle='tooltip']").tooltip('hide'); }); $(".btn-success").click(function(){ $("[data-toggle='tooltip']").tooltip('toggle'); }); $(".btn-danger").click(function(){ $("[data-toggle='tooltip']").tooltip('destroy'); }); $("[data-toggle='tooltip']").on('hide.bs.tooltip', function(){ alert('The cat will stop say "Meow"!!'); }); $("[data-toggle='tooltip']").on('hidden.bs.tooltip', function(){ alert('The cat stopped meowing.'); }); }); </script> </body> </html> |
Надеюсь вам понравилась моя статья и веселые примеры кода. Дайте мне знать об этом, подписавшись на обновления моего блога. Буду очень рад, если вы также расскажете о нем своим друзьям и знакомым. А я желаю вам удачи в обучении. До новых встреч!
Пока-пока!
С уважением, Роман Чуешов