Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях

Пошагово создаем всплывающие подсказки вместе с элементом bootstrap tooltip

Доброго времени суток, верные читатели моего обучающего блога и гости сайта. В сегодняшней публикации вы познакомитесь с таким элементом, как 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="http://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>

Надеюсь вам понравилась моя статья и веселые примеры кода. Дайте мне знать об этом, подписавшись на обновления моего блога. Буду очень рад, если вы также расскажете о нем своим друзьям и знакомым. А я желаю вам удачи в обучении. До новых встреч!

Пока-пока!

С уважением, Роман Чуешов


Прочитано: 99 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: