Главная » Каталог » Tooltips » Tooltipster - гибкий и расширяемый jQuery плагин для создания современных всплывающих подсказок

Tooltips

Tooltipster - гибкий и расширяемый jQuery плагин для создания современных всплывающих подсказок



Подключаем всплывающие подсказки и настраиваем темы оформления

Для начала давайте посмотрим как вообще подключить этот плагин, чтобы начали работать красивые всплывающие подсказки в его исполнении) итак, в шапке страницы сайта подключаем файл базовых стилей плагина, библиотеку jQuery и скрипт подсказок:

Код

<head>
  <link rel="stylesheet" type="text/css" href="tooltipster/dist/css/tooltipster.bundle.min.css" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
  <script type="text/javascript" src="tooltipster/dist/js/tooltipster.bundle.min.js"></script>
</head>


кстати, работать будет с версиями библиотеки jQuery, начиная с jQuery 1.7, исключением будет вариант, если вам нужна поддержка SVG в IE (там понадобится версия jQuery 1.10+), также Tooltipster не работает вообще с версией JQuery 1.8 в IE9

Теперь нам нужно для тех элементов, к которым мы хотим выводить всплывающие подсказки, добавить класс "tooltip". Примеры:

Код

<img src="адрес к файлу изображения" class="tooltip" title="Описание изображения, оно же содержимое всплывающей подсказки" />
<a href="адрес какой-то ссылки" class="tooltip" title="Содержимое всплывающей подсказки"/>Ссылка</a>
<span class="tooltip" title="Это содержимое всплывающей подсказки">Какой-то текст</span>


Кстати, если вы используете Bootstrap, название класса "tooltip" придётся изменить на другое, иначе возникнет конфликт одноимённых классов

Так, ну и, собственно, осталось нам только добавить маленький скрипт активации Tooltipster:

Код

<head>
  ...
  <script>
  $(document).ready(function() {
  $('.tooltip').tooltipster();
  });
  </script>
</head>




Всё, теперь, если вы всё подключили правильно, должны заработать красявые всплывающие подсказки для тех элементов, которым вы прописали класс "tooltip". У меня вроде заработали) посмотрите демо:

Демо

Теперь, когда подсказки заработали, можно выбрать тему их оформления, доступно, по умолчанию, не считая базовой (tooltipster.bundle.min.css), еще пять тем (в архиве ищите файлы их css-стилей в папке themes):

- tooltipster-sideTip-borderless.min
- tooltipster-sideTip-light.min
- tooltipster-sideTip-noir.min
- tooltipster-sideTip-punk.min
- tooltipster-sideTip-shadow.min

Чтобы применить какую-либо из этих тем, как вы уже наверное догадались, нужно подключить файл её css-стилей после уже подключенного базового css-файла. И еще! Помните, мы добавляли небольшой скрипт активации плагина?

Код

<head>
  ...
  <script>
  $(document).ready(function() {
  $('.tooltip').tooltipster();
  });
  </script>
</head>


так вот, в нём нужно прописать название той темы оформления всплывающих подсказок, файл со стилями которой вы подключили, например, вы подключаете файл стилей tooltipster-sideTip-noir.min.css, а в скрипте прописываете :

Код

<head>
  ...
  <script>
  $(document).ready(function() {
  $('.tooltip').tooltipster({
  theme: 'tooltipster-noir'
  });
  });
  </script>
</head>


Вроде получилось, посмотрите демо для темы noir :

Демо для темы Noir

Ну и демо остальных тем:

Borderless Light Punk Shadow

Использование внутри всплывающих подсказок HTML

Tooltipster даёт возможность использовать внутри подсказок любую HTML-разметку. Это значит, что вы можете внутрь подсказки вставить, к примеру, изображение и теги форматирования текста.
Как это сделать? Допустим, вы хотите вывести для какого-то элемента подсказку, так вот для этого элемента атрибут title нужно заменить на другой атрибут, называется он так : data-tooltip-content. Содержимым этого атрибута будет селектор, соответствующий HTML-элементу на вашей странице, который должен использоваться в качестве содержимого подсказки.
Пример:

Код

<span class="tooltip" data-tooltip-content="#tooltip_content">Для этого элемента будет выведена подсказка с HTML-содержимым</span>

<div class="tooltip_templates">
  <span id="tooltip_content">
  <img src="myimage.png" /> <strong>Это содержимое всплывающей подсказки</strong>
  </span>
</div>


Поясняю, что тут к чему. Для элемента span с классом tooltip задан атрибут data-tooltip-content, в котором указано, что содержимое подсказки нужно взять из элемента с id = tooltip_content.
Чуть ниже в коде мы как раз видим этот элемент, это элемент span, внутри которого заключено изображение и текст. Вот они и будут выводиться в всплывающей подсказке.

В вашем файле стилей CSS добавьте строку,

Код

.tooltip_templates { display: none; }


чтобы содержимое всплывающей подсказки не выводилось за её пределами изначально на странице при загрузке.
Здесь есть один важный момент: если вы хотите использовать несколько подсказок, которые будут иметь один и тот же атрибут data-tooltip-content
(то есть будут использовать один и тот же элемент HTML), вам нужно в скрипте инициализации ваших подсказок установить параметр contentCloning с значением true

Код

$('.tooltip').tooltipster({
  contentCloning: true
});


Можете посмотреть что получилось.

Демо

Есть еще несколько альтернативных способов вывода HTML-содержимого в подсказках Tooltipster, если вас интересуют подробности, можете перейти на страницу разработчика по этой теме.

Расширение Tooltipster с помощью плагинов

Особенностью Tooltipster является возвомжность расширения возможностей за счёт использования плагинов. Они могут дать новые стили оформления, новые возможности, методы, модели поведения и т.д.

Наиболее популярные плагины для Tooltipster:

sideTip - поставляется с Tooltipster и используется по умолчанию
SVG - поставляется с Tooltipster, включена поддержка SVG, отключен по умолчанию (см.здесь)
follower - позволяет подсказке следовать за курсором (см.здесь)
scrollableTip - данный плагин делает прокрутку для подсказки, если она становится слишком большая по содержанию (см.здесь)
discovery - создаёт группу подсказок для быстрого отображения (см.пример и здесь)

Настройки отображения всплывающих подсказок

Опции Tooltipster дают вам широкий выбор переменных для настройки отображения всплывающих подсказок так, как нравится вам. Пример того, как это делается:

Код

$('.tooltip').tooltipster({
  animation: 'fade',
  delay: 200,
  theme: 'tooltipster-punk',
  trigger: 'click'
});


В данном случае, подсказка будет появляться при клике на элемент с анимацией затухания и задержкой в 200. Какие еще здесь есть варианты настройки подсказок? Их масса, с полным списком можете ознакомиться здесь, на официальной странице разработчика. Попробуйте, поэкспериментируйте различные варианты и найдите тот, который вам понравится и который будет отвечать вашим задачам. Успехов!

Пример анимации grow Пример анимации swing Пример анимации slide Пример анимации fall
Обсуждение материала:
Комментариев: 0
avatar

Другие материалы:

    Дополнительная информация во всплывающих подсказках на CSS

    13.04.2017

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

    Комментарии: 0   Просмотры: 116

    PowerTip - jQuery плагин для создания всплывающих подсказок

    06.11.2016

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

    Комментарии: 0   Просмотры: 259

    Toolbar.js - jQuery плагин для создания панелей инструментов во всплывающих подсказках

    10.10.2016

    А вот это, конечно, просто вау, ребята! Стильные, компактные панели инструментов, внутри всплывающих подсказок! Мечта веб-мастера! Не занимают много места, гибкие в настройке, используются шрифтовые иконки от Font Awesome, добавляются для любого элемента на странице сайта. Настройки дают возможность использования различной анимации, положений и событий. Ну и, само собой, есть возможность настройки оформления самих всплывающих подсказок в плане оформления.

    Комментарии: 0   Просмотры: 214

Теги материала

Хостинг от uCoz