Плагин «jQuery Tooltips» для MaxSite

Раскрашиваем и оживляем всплывающие подсказки

Понемногу натягиваю дизайн jenWeb.info на LabCMS. А там, надо сказать, автор не стал разделять дизайн back- и frontend'а. Один, то есть, шаблон. И используется MooTools. Мне же больше по душе jQuery и отдельная админка со своим специфичным админским дизайном. Для админки, наверное, сверстаю свой шаблон, пусть будет. А шаблон frontend'а перевожу на jQuery.

В связи с этим надо менять решения для bbcode и tooltips (всплывающих подсказок).
Для последних как раз сделал. И заодно собрал плагин для MaxSite.

Основной файл плагина — jquery.tooltip.min.js.
Исходный плагин и демо с вариантами использования здесь.

Настройки и стили меняются непосредственно в index.php плагина.

Настройки jquery.tooltip.min.js:


<script type="text/javascript">
//<![CDATA[
$(function() { 
	$("*:not(link,'a.cboxElement')[title]").tooltip({ // Выбираем любые элементы с атрибутом title, кроме link
		track: true,	// Заставляем всплывающую подсказку двигаться за курсором
		delay: 0,	// Задержка появления вслывающей подсказки
		showURL: false,	// Не показывать адрес ссылки
		fade: 200	// Время плавного появления
	});
});
	$("a.cboxElement").each(function(){ // Решение Jack Moore, автора ColorBox
		$(this).colorbox({title:$(this).attr('title')});
	}).filter('[title]').tooltip({
		track: true,	// Настройки могут быть другими.
		delay: 0,	// Внешний вид можно изменить
		showURL: false,	// используя extraClass,
		fade: 200	// ссылка  в тексте выше.
	});
//]]>
</script>

Стилевое оформление всплывающих подсказок: (элемент #tooltip создается скриптом)


<style type="text/css">
#tooltip {
	max-width: 400px;
	position: absolute;
	z-index: 9999;
	border: 1px solid #111;
	background-color: #eee;
	padding: 6px 12px;
	opacity: 0.85;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
#tooltip h3 {font-size: 14px; color: #000;} /* font-weight: normal;*/
</style>
<!--[if lte IE 6]><style type="text/css">#tooltip {width: 200px;}</style><![endif]-->

Upd IE 6 и 7 выдают опупенный размер шрифта и не реагируют на font-size .

***

Разобрался. Для всплывающей подсказки скрипт формирует тег h3, таким образом, будет работать правило #tooltip h3 {свойства текста всплывающей подсказки}

Обновил код выше и архив плагина.

Скачать плагин «jQuery Tooltips»

Loading comments …   ←   Плагин «jQuery Tooltips» для MaxSite

Fields marked with asterix are required.


Max 40 alpha-numeric characters, including spaces.


Valid email. Max 255 characters. Not displayed publicly.

*