LiveTips! Мои 5 копеек. Tooltip jQuery plugin.
-
Отличительные фичи моего плагина
- Можно навести курсор на всплывающую подказку и нажать на какой-нить линк внутри
- Можно зафиксировать высоту подсказки и прокручивать большие тексты внутри
- Проверка выхода подсказки за пределы видимости
-
Естественно можно:
- Указать свой стиль тултипа (прозрачность и т.п.)
- Указать позицию подсказки
- Задать текст подсказки как title ссылки или как div, идущий за сылкой (для объемных, html подсказок)
Работает с jQuery 1.2.6+ или более поздней версией.
Скачать плагин можно здесь: liveTips-0.2.zip
Страница с примерами
На страницу добавляем так:
Пример 1
Полупрозрачный тултип, выводим красивые подсказки к ссылкам и блокам:
Образец ссылки
<script type="text/javascript" src="liveTips.js"></script>
<script type="text/javascript">
<!-- После загрузки страницы tip будет добавлен ко всем ссылкам страницы с элементом title -->
jQuery(function($){
$('a').liveTips({opacity:0.7});
});
</script>
<a href="http://site.ru" target="_blank" class="title_tips" title="Описание ссылки.">Текст ссылки</a>
Пример 2
Тултип с большим текстовым блоком и прокруткой:Образец ссылки с большим текстовым блоком
Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1989—1991 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки.
HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов — дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже.
Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако современное применение HTML очень далеко от его изначальной задачи.
<script type="text/javascript" src="liveTips.js"></script>
<script type="text/javascript">
<!-- После загрузки страницы tip будет добавлен ко всем ссылкам с классом wide_tips -->
jQuery(function($){
$('.wide_tips').liveTips({
opacity: 0.7,
contentdiv: 1,
contentdivref: '.tip_container',
canover: 1,
addclass: 'wide_tip'
});
});
</script>
<a class="wide_tips">html 5</a>
<div class="tip_container">
<div class="tip_window">
<div class="inner">
<b>Title</b>
<p>Text</p>
</div>
</div>
</div>
Пример 3
Html тултип, можно сделать описание файлов или описание пользователей, можно также вставить картинку, как подсказку:Образец ссылки с html блоком
Размер: 75кб
Скачало: 377
<script type="text/javascript" src="liveTips.js"></script>
<script type="text/javascript">
<!-- После загрузки страницы tip будет добавлен ко всем ссылкам с классом wide_tips -->
jQuery(function($){
$('.file_tips').liveTips({
contentdiv: 1,
contentdivref: '.tip_container',
addclass: 'file_tip'
});
});
</script>
<a href="/" class="fite_tips">Скачать файл</a>
<div class="tip_container">
<div class="logo">
<img src="/sites/default/files/pictures/logo.png"/>
</div>
<div>
<b>liveTips.zip</b>
<div class="body">
Добавлен: 02.10.2011 13:30<br/>
Размер: 75кб<br/>
Скачало: 377
</div>
</div>
</div>
Настройки плагина
- contentdiv: 0/1 - Брать содержимое подсказки из div контейнера (1) или из title атрибута (0)
- contentdivref: '.tip_container' - jQuery путь до div контейнера с содержимым подсказки
- opacity: (0-1) - Прозрачность подсказки
- showdelay: 0 - Задержка перед появлением подсказки в милисекундах
- hidedelay: 300 - Задержка перед исчезновением подсказки в милисекундах
- showduration: 0 - Длительность анимации появления подсказки в милисекундах
- hideduration: 0 - Длительность анимации исчезновения подсказки в милисекундах
- offsetx: 0 - Сдвиг всплывающей подсказки по оси X в пикселях
- offsety: 0 - Сдвиг всплывающей подсказки по оси Y в пикселях
- canover: 1/0 - Включить возможность наведения курсора на подсказку
- addclass: 'class_name' - Добавить подсказке специальный класс, для дополнительной стилизации
- positionx: 'left' | 'center' | 'right' - Положение подсказки по горизонтали
- positiony: 'top' | 'center' | 'bottom' - Положение подсказки по вертикали
Добавить комментарий