itProger Відеокурси Изучение технологии Bootstrap (верстка сайта) #14 - Всплывающие подсказки (tooltip.js)

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

Для создания красивых всплывающих подсказок можно использовать плагин tooltip.js. Плагин позволяет добавить всплывающие подсказки с разных сторон при наведении на какой-либо объект. За урок мы научимся подключать плагин и работать с ним.

Відеоурок

Підписуйтесь на нашу групу в Телеграмі 🇺🇦

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

Вихідний код

Подсказки в действии

<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>

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

Завантаження...

Завдання до уроку

Необхідно оформити передплату на проект, щоб отримати доступ до всіх домашніх завдань

Велике завдання за курсом

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

Також варто подивитися