Опубликовано автор в категориях Верстальщику.

tooltipslide

Сегодня я в обзорном посте расскажу об очень простом и удобном плагине для jQuery, который генерирует всплывающие подсказки –Easy Tooltip.  Хотя в названии говорится о простых тултипах, я бы не стал недооценивать возможности этого плагина.  Автор плагина Alen Grakalic, создал очень простой но в тоже время довольно мощный инструмент для генерации сплывающих подсказок с произвольным пользовательским контентом. В общем, к делу…

Характеристики плагина

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

Характерной особенностью плагина является то, что вы можете ввести в подсказку любое содержимое: любой HTML, картинки, длинные параграфы, ссылки список… Что угодно. Если вы не любитель писать HTML код внутри JavaScript переменной, этот плагин позволяет использовать внутренний HTML от любого элемента на странице. Это означает, что Вы можете писать HTML непосредственно на странице, как обычно делают, потом скрыть элемент с помощью CSS, и он появится в качестве подсказки на наведение курсора на элемент с подсказкой.

Основные опции:

  • xOffset — Сдвиг в левую от курсора (в пикселах). Значение по умолчанию является 10.
  • YOffset — Сдвиг к началу от курсора (в пикселах). Значение по умолчанию является 25.
  • TooltipId — используйте это, если вы хотите назначить пользовательский идентификатор вашей подсказки. Кроме того, если у вас есть несколько подсказок на одной странице, и вы хотите стилизовать их по-разному, используйте разные идентификаторы для привязки разных CSS определений. Значение по умолчанию является «easyTooltip».
  • ClickRemove — По умолчанию подсказка исчезнет после того, как вы убираете курсор от элемента. С помощью этой опции можно убирать Tooltip путем нажатия на элемент. Значение по умолчанию для данного варианта является ложным.
  • Content — По умолчанию Easy Tooltip отображает название атрибута элемента. Используйте эту опцию для отправки пользовательского содержания в подсказке. Значение по умолчанию для этой опции «» (пусто).
  • UseElement — Если вы хотите отображать более сложных HTML в вашей подсказки, и не хотите вводить конструкцию внутрь переменной, то вы можете использовать определенный элемент внутренней HTML. Лучший способ для использования этого варианта заключается в том, чтобы создать статические HTML элемент, скрыть его с CSS, использовать его ID при установке плагина (взгляните на 3 демо)

Ознакомиться с примерами плагина можно вот по этим ссылкам, там же указаны и способы внедрения:

Использовать плагин очень просто. Для начала, конечно у вас должна быть подключена сама библиотека jQuery. Далее подключаем сам скрипт плагина. А для его активации достаточно прописать простой кусочек js-кода:

$(document).ready(function(){
	$("a").easyTooltip();
});

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

P.S. — Карты, тачки, свадьбы…

Да, свадьба. Мероприятие не из дешевых. А было бы неплохо зарулить в лучшие казино Лас-Вегаса, выиграть там немереное количество денег. Вернуться на родину, купить лучшую тачку тюнингованную би ксенон. А потом посетить лучшие свадебные салоны москвы, купить лучшие наряды и закутить в лучшем ресторане…Пвх трубы крепление. Трубы пвх обрели.

10 комментариев к записи “Easy Tooltip — хороший плагин всплывающих подсказок для jQuery”

  1. Роман

    Все бы хорошо, но не работает при смежном использовании библиотеки prototype … Может есть у кого решение?

    Ответить
  2. Одиночка Айс

    Автор замечания имел ввиду что-то следующее:

    $(document).ready(function(){
    $(«.btn-slide»).click(function(){
    $(«#panel»).slideToggle(«slow»);
    $(this).toggleClass(«active»); return false;
    });
    $(«a»).easyTooltip();
    });

    Однако, даже замена на jQuery(«a»).easyTooltip(); все равно приводит к ошибке о том, что данная фича не является функцией

    Ответить
  3. piligrim

    все супер)… а как заставить появляться подсказку не возле курсора, а, скажем, постоянно в левом верхнем углу ?

    Ответить
  4. Andre

    а как сделать, чтобы картинка с градиентной прозрачностью нормально отображалась в IE, в IE часть картинки не прозрачная отображается нормально, а др часть где прозрачность не 0 и не 100% черная.

    Ответить

Оставить комментарий

  • (не будет показан)