Гостевой вход

Вы не залогинились
12:24

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

Категория: Tooltips

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

Примечание: плагин работает с версией библиотеки jQuery, начиная с JQuery 1.7 и более поздними.

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

Код

<link rel="stylesheet" type="text/css" href="/css/jquery.powertip.css" />


в самом низу кода страницы подключаем файлы скриптов: библиотеки jQuery и плагина:

Код

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="/jquery.powertip.js"></script>
<script type="text/javascript" src="/script.js"></script>


Теперь осталось выбрать элемент, для которого мы хотим выводить всплывающую подсказку. Возьмём, в качестве примера, кнопку:

Код

<input type="button" id="north" value="Текст кнопки" title="Текст подсказки"/>


в данном случае, для элемента задан идентификатор (id) "north", поэтому подсказка будет выведена сверху посередине элемента.

Демо

Меняя значения id для элемента, мы можем изменять положение выводимой подсказки. Доступные значения id и соответствующие им варианты вывода подсказок вы можете посмотреть на следующей демо-странице:

Демо

Для всплывающих подсказок доступны разные цветовые схемы их оформления, просто замените файл jquery.powertip.css на файл нужной цветовой схемы:

- jquery.powertip-blue.css
- jquery.powertip-dark.css
- jquery.powertip-green.css
- jquery.powertip-light.css
- jquery.powertip-orange.css
- jquery.powertip-purple.css
- jquery.powertip-red.css
- jquery.powertip-yellow.css

Все восемь файлов css оформления цветовых схем вы найдёте в архиве для скачивания. Теперь же мы рассмотрим другой вариант использования всплывающих подсказок с помощью плагина PowerTip. А именно: как сделать, чтобы подсказка следовала за курсором. Рассмотрим вот такую демо-конструкцию:

Код

<div id="mousefollow-examples">
<div title="Mouse follow">
The PowerTip for this box will follow the mouse.
</div>
</div>


имеем какой-то блок div с заданным идентификатором id="mousefollow-examples", название id может быть и другим, но тогда его нужно изменить и в файле скрипта script.js в этом месте:

Код

// mouse follow examples
$('#mousefollow-examples div').powerTip({ followMouse: true });


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

Например, зададим три блока div с разными id:

Код

<div id="examples1">
<div title="Текст подсказки 1">
Содержимое блока.
</div>
</div>

<div id="examples2">
<div title="Текст подсказки 2">
Содержимое блока 2.
</div>
</div>

<div id="examples3">
<div title="Текст подсказки 3">
Содержимое блока 3.
</div>
</div>


тогда в скрипте script.js прописываем:

Код

$('#examples1 div').powerTip({ followMouse: true });
$('#examples2 div').powerTip({ followMouse: true });
$('#examples3 div').powerTip({ followMouse: true });


Смотрим полученный результат на демо-странице:

Демо

Теперь еще один вариант использования плагина PowerTip - вывод всплывающей подсказки для блока, содержащей разметку и ссылку.

Базовая демо-конструкция такая:

Код

<div id="mouseon-examples">
<div>
Большая часть мужчин требует от своих жен достоинств, которых сами они не стоят.
</div>
</div>


по-сути, имеем тот же родительский блок div с идентификатором, в данном случае название идентификатора mouseon-examples, внтури родительского блока еще один div с контентом (в данном случае, просто текст).

В файле скрипта script.js прописываем следующее:

Код

// mouse-on examples
  $('#mouseon-examples div').data('powertipjq', $([
  '<p><b>Цитата</b></p>',
  '<p><a href="##">Л.Н.Толстой</a></p>',
  '<p>Известный русский писатель и мыслитель.</p>'
  ].join('\n')));
  $('#mouseon-examples div').powerTip({
  placement: 'e',
  mouseOnToPopup: true
  });


Демо

В данном случае, подсказка выводится справа от блока, за это отвечает вот эта строка в скрипте:

Код

placement: 'e',


'e' здесь означает сокращение от 'east' (как мы рассматривали ранее, это вывод подсказки справа), таким образом, если мы укажем, по аналогии, сокращение от 'west' как 'w',

Код

placement: 'w',


то подсказка будет выводиться слева от блока итд. Прочие сокращения выглядят так:
Код

placement: 'n'  
placement: 'e'  
placement: 's'  
placement: 'w'  
placement: 'nw'  
placement: 'ne'  
placement: 'sw'  
placement: 'se'  
placement: 'nw-alt'  
placement: 'ne-alt'  
placement: 'sw-alt'  
placement: 'se-alt'  


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

1. выбираем элемент, к которому необходимо вывести всплывающую подсказку и присваиваем ему какой-то идентификатор (id)
2. заполняем содержимое атрибута для элемента, это и будет содержимое подсказки (например, для ссылки это title, для input это value итд)
3. прописываем скрипт, вызывающий подсказку в виде:

Код

<script type="text/javascript">
$(function() {
$('#здесь идентификатор вашего элемента').powerTip({ placement: 'n' });
});
</script>


тут же, в скрипте, для параметра placement указываем нужное значение, которое отвечает за место вывода подсказки (сверху, снизу, сбоку итд)

Простейший пример

А если мне нужно вывести одинаково оформленные всплывающие подсказки к нескольким элементам на странице, например, ссылкам с одним и тем же классом, как это сделать?

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

Код

<ul>
<li><a class="tooltip" href="##" title="Всплываю!"/>Ссылка с классом tooltip</a></li>
<li><a href="##" title="Всплываю!" class="tooltip"/>Ссылка с классом tooltip</a></li>
<li><a href="##" title="Всплываю!" class="tooltip"/>Ссылка с классом tooltip</a></li>
<li><a href="##" title="Всплываю!"/>Ссылка без класса tooltip</a></li>
</ul>


тогда скрипт вызова всплывающих подсказок для всех этих ссылок будет таким:

Код

<script type="text/javascript">
$(function() {
$('.tooltip').powerTip({
placement: 'ne'});
});
</script>


Демо

Вот так всё это просто и делается. Ну а для каких-то единичных элементов на странице, соответственно, используйте идентификаторы id.

Кстати! А если у ссылки на странице нет возможности прописать класс? А? как быть в этом случае?
Как вариант, можно добавить элементам класс с помощью метода аddClаss(). В нашем случае так:

Код

<script type="text/javascript">
$(function() {
$('a').addClass('info');
$('.info').powerTip({
placement: 'ne'});
});
</script>


что делает скрипт? добавляет всем элементам a (ссылкам) класс info, а затем выводит для элементов с классом info всплывающие подсказки.
Как пример, попробовал на странице регистрации uCoz платформы:



Ну и не могу не сказать о такой возможности вывода всплывающих подсказок, как вариант с использованием атрибута HTML5 data.
Рассмотрим пару вариантов.

Вариант 1

Имеем какую-то ссылку, для которой не прописан title:

Код

<a id="element" href= "##" >Ссылка</a>  


В самом низу кода страницы, после файлов скриптов библиотеки jQuery и jquery.powertip.js, добавляем скрипт:

Код

<script>
$(function() {
$('#element').data('powertip', 'Это подсказка').powerTip({placement: 'ne'});
});
</script>


Теперь для этой ссылки будет выводиться всплывающая подсказка с текстом "Это подсказка".

Вариант 2

Опять же, имеем какую-то ссылку, для которой не прописан title:

Код

<a id="element2" href= "##" >Ссылка</a>  


В самом низу кода страницы, после файлов скриптов библиотеки jQuery и jquery.powertip.js, добавляем скрипт:

Код

<script>
$(function() {
$('#element2').data('powertip', function() {
return 'Это текст <b>всплывающей подсказки</b>.';
}).powerTip({placement: 'ne'});
});
</script>


Посмотрите демо обоих вариантов по ссылке ниже.

Демо

В своей статье я кратко познакомил вас с некоторыми возможностями этого замечательного jQuery плагина для создания красивых всплывающих подсказок. Более углубленное изучение всех остальных возможностей этого плагина вы можете самостоятельно освоить на странице разработчика.

Просмотров: 291 | Скачиваний: 40 | Комментариев: 0 | Рейтинг: 5.0/Оценок: 1

Материалы схожей тематики

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

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

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

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

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

    Достаточно прост для всех и достаточно мощный для всего! Ни много, ни мало, именно такой слоган у авторов этого jQuery плагина стоит на главной! И, скажу я вам, если они и лукавят, то лишь самую малость - возможности этого плагина для создания всплывающих подсказок и вправду впечатляют!

    Всплывающая подсказка на jQuery

    Вариант всплывающей подсказки с закруглением углов и тенью для блока подсказки. Используется предустановленные настройки CSS и библиотека jQuery с официального ресурса. В демо-примере показаны варианты всплывающей подсказки для ссылок и для поля ввода input.

Онлайн статистика

18.11.2017

Суббота

Онлайн всего: 1
Гостей: 1
Пользователей: 0

На сайте сейчас: