Уроки Bootstrap

#14 - tooltip.js (всплывающие подсказки)

#14 - tooltip.js (всплывающие подсказки)

В этом уроке мы научимся создавать всплывающие подсказки при наведении на какой-либо объект. Все это возможно благодаря плагину tooltip.js, который позволяет все сделать в пару строк кода!

Видеоурок

Исходный код

Подсказки в действии
<br><br>
<div class="container">
  <a href="#" data-toggle="tooltip" title="Что-то не сработало?">Наведите курсор</a>
  <br>
  <button data-toggle="tooltip" title="Кнопка" data-placement="right" class="btn btn-success">Наведите курсор</button>
  <br><br>
  <a href="#" data-toggle="tooltip" data-placement="left" title="Что-то не сработало?">Наведите курсор</a>
  <br><br>
  <a href="#" data-toggle="tooltip" data-placement="bottom" title="Что-то не сработало?">Наведите курсор</a>
</div>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
  $(document).ready (function (){
    $('[data-toggle="tooltip"]').tooltip ();
  });
</script>

Онлайн редактор кода

Загрузка...

Задание к уроку

Работа со всплывающими подсказками
Ваша задача состоит в том, чтобы самостоятельно создать всплывающую подсказку для span, a (ссылки), p и для кнопки. Сделайте чтобы подсказки отображались в разных местах.
Посмотреть ответ
Вам понадобится следующий HTML код:
<div class="container">
  <span data-toggle="tooltip" data-placement="left" title="Первая подсказка">Наведите курсор</span><br>
  <a href="#" data-toggle="tooltip" data-placement="right" title="Вторая подсказка">Наведите курсор</a><br>
  <p data-toggle="tooltip" data-placement="bottom" title="Третья подсказка">Наведите курсор</p>
  <button data-toggle="tooltip" title="Четвертая подсказка" class="btn btn-success">Наведите курсор</button>
</div>
Также вам надо будет добавить jQuery, чтобы все заработало:
<script>
  $(document).ready (function (){
    $('[data-toggle="tooltip"]').tooltip ();
  });
</script>

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца

Также стоит посмотреть

Видеокурс по PHP, MySQL / Создание динамического сайта
Создание блога на Ruby On Rails
8 уроков
Уроки Python Django / Создание сайта
12 уроков
Вёрстка адаптивного сайта на Bootstrap 4
6 уроков
Современная вёрстка адаптивного веб-сайта