jQuery tooltip проблема
 

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

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

(function($) {
$.fn.tooltip = function(options){
	$('body').append('<div class="tooltip"></div>');
	var options = jQuery.extend({
		title: '',
		top: 0,
		left: 0
	},options);
	return this.each(function() {
			$(this).mouseover(function(){
				options.top = $(this).offset().top - 25;
				options.left = $(this).offset().left - $(this).width()/2;
					options.title = $(this).attr('title');
					$('.tooltip').text(options.title)
					.css('display', 'block')
					.css('top', options.top)
					.css('left', options.left);
					$(this).attr('title', '');
			});
			$(this).mouseout(function(){
				$(this).attr('title', options.title);
				$('.tooltip').css('display', 'none');
			});
			
	});
	
};
})(jQuery)

А вот и html:

<div class="min_images">
    <a href="#" class="active" title="idsfisdio">
        <img src="images/min_img_1.jpg" alt="" />
    </a>
    <a href="#" title="idsfisdio">
        <img src="images/min_img_2.jpg" alt="" />
    </a>
    ...
    <a href="#" title="idsfisdio">
        <img src="images/min_img_7.jpg" alt="" />
    </a>
</div>

В общем проблема вот в чем, есть еще один скриптик который присваивает класс active:

<script type="text/javascript">
	$(function(){
		$(".min_images a").click(function(){
			$(".min_images a").removeClass('active');
			$(this).addClass('active')
		})
	}) 
</script>

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

ЗЫ: очень надеюсь что не ошибся темой, если что извеняйте не нарошно.

Возможно, туплю, но не вижу связи между тултипами и ссылками с классом active и без него.

По теме - такие вещи гораздо лучше делать при помощи css (получается быстрее во всех смыслах).
К коду: функция offset достаточно затратная и уж как минимум её вызов следует сохранять в переменную, а затем к ней обращаться.

SouthTracer,
в вашем коде я не увидел как напоминания о классе active, так и вообще активного взаимодействия с css. ели я ошибся, скажите линию, на которой упоминается этот класс

к коду замечаний огромное количество, например

1. многократные выховы $.css ( можно было засунуть все в один вызов, передав хеш)
2. использование options.left и options.right (можно было просо поставить значения в css и не заморачиваться, а поставить только options.title, который используется при mouseout )
3. нет кеширования найденных элементов - я про .tooltip. её вообще можно не искать.

Ещё +1 аргумент в пользу того, чтобы делать всё на css - в случае css содержание (текст всплывающих подсказок) находится в html, которое там, скорее всего, формирует серверный скрипт, а простейшая логика попадает в css.
В случае же с представленным плагином, описание подсказок, скорее всего, попадёт в код javascript, что является плохой практикой, так как этот скрипт не получится вынести в отдельный файл и произойдёт ухудшение читаемости кода (и, возможно, увеличение веса страницы). В javascript желательно помещать только логику.

crayday,
помещайте текст подсказок в HTML, кто ж мешает.

Kolyaj,
Да, верно. Это, пожалуй, имеет смысл тогда, когда для подсказок предполагается анимация.

точно, блин, забыл сказать, запускается плагин следующим образом:

$('.min_images a:(".active")').tooltip();

Это не скрипт, это плагин, а плагин располагается в отдельном файле. Так что я либо тебя не понял, либо ты не понял меня. :-?

ЗЫ: Текст подсказок и так в html, он достается из title ссылки.

Каким способом можна выудить ID дива по его offset().top?
Подскажите ,пожайлуста или дайте идеи

<div [B]id='N'[/B]> xxxx</div>
<script type="text/javascript">

var r= $('div').offset().top
var R= $('div')
if(r<12){
alert(R.attr('id'))	
	
		}
</script>

Мож ичем пройтись складывая в массив offset().top и ай ди каждого дива?

Андрей38, начинай уже делать нормальные примеры, не ленись...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id='N'> xxxx</div>
<div id='M'> yyyy</div>
<div id='K'> zzzz</div>
<script type="text/javascript">
	$('div').each(function(){
		var top=$(this).offset().top;
		if (top<40) {
			alert(this.id)	
		};
	});
</script>
</body>
</html>

КСА ! ОГРОМНЕЙШЕЕ СПАСИБО!:thanks: :thanks: :thanks: :thanks: А я то думал, в эррей все запихать и тягать по индексу и смотреть ,что вытянулось :)
http://www.youtube.com/watch?feature...&v=NIea9mUUR8U
Ну я не ленюсь ,как бы.. Я уже и растиражировал такой эффект по всей таблице.Но начало напрягаться и тормозить.В строке по 3 штуки одинаковых контентов с разными индексами по Зет.
Поэтому тулпит по офсету- наиболее актуально. спасибо , еще раз ,маэстро :thanks:
...Классная связка- ич-зис ....