Нестандартные всплывающие подсказки. Нужна конструктивная критика!
 

Привет всем! Я пока не очень хорошо знаю JavaScript, и поэтому прошу вас прокритиковаться от души :)
Написал код который заменяет все стандартные всплывающие подсказки на нестандартные: при наведении берется текст из атрибута title, и вставляется в блок, который тут же появляется под курсором.
Вот код js:

$(document).ready(function(){
	gtitle();
});

var mouseX = 0;
var mouseY = 0;

function gtitle(){
	$('*').mouseover(function(){
		if($(this).attr('title')){
			//Из title в блок gtitle
			var gtitletext = $(this).attr('title');
			$('#gtitle').empty();
			$('#gtitle').append(gtitletext);
			$(this).removeAttr('title');//Удаляет арибут title, чтобы не вылезал стандартный title
			viewGTitle();
			$(this).mouseout(function(){
				hideGTitle()
				//Обратно из блока gtitle в title 
				$(this).attr('title', gtitletext);
			});
		}
	});
	$(document).mousemove(function(e){//Запоминает координаты мыши
		mouseX = e.pageX;
		mouseY = e.pageY;
	});
}

function viewGTitle(){//функция для появления блока gtitle в правильном месте
	$('#gtitle').css({
		"position":"absolute",
		"top":mouseY-4-$('#gtitle').height()-parseInt($('#gtitle').css("padding-top"))-parseInt($('#gtitle').css("padding-bottom")),
		"left":mouseX+4
	});
	$('#gtitle').stop();
	$('#gtitle').css("display", "block")
	$('#gtitle').animate({
		opacity:1
	}, 400);
}

function hideGTitle(){
	$('#gtitle').stop();
	$('#gtitle').animate({
		opacity:0
	}, 400, function(){$('#gtitle').css("display", "none");});
}

Мне интересно, что бы вы сделали по другому, и как именно?

$('*').mouseover(function()...
Тоесть навешиваем обработчики на все элементы страницы? Жесть. На этой странице их например 1200 штук. Зато при динамическом создании новых элементов они окажутся вне игры? Откройте для себя делегирование событий.
$(document).mousemove - еще и постоянный обработчик mousemove ? Откройте для себя unbind.
$(this).mouseout(function(){ - мы навешиваем вновь и вновь обработчик mouseout всякий раз по событию mouseover ? То есть при 100-м наведении на элемент мы получим 100 обработчиков mouseout ? Ну завели бы уже цикл for (var i=0; i < 100; i++) $(this).mouseout(fu...

Еще я не вижу где создается #gtitle.
И какой смысл в объявлении всех этих функций и переменных (mouseX/Y) глобально? В общем крайне убогая реализация, исправляйте перечисленные моменты, приходите вновь :)

Спасибо, пойду дальше изучать js и совершенствовать этот код.
Как все исправлю приду за новой дозой критики :)

Zuenf,
В принципе есть плагин .tipsy http://onehackoranother.com/projects/jquery/tipsy/
(См Gravities - Наводить на серое


Перевод
http://translate.google.com/translat...ed=0CDUQ7gEwAA

Нет спасибо) Я просто решил сам попробовать сделать и поучиться заодно)

Вот что пока получилось.
 

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

$(document).ready(function(){
	initGTitle("#gtitle");//Инициализация
});

function initGTitle(idtitle){// idtitle - id, уже созданного и оформленного в css, блока для всплывающих подсказок.
	document.onmouseover = function(e) {
		var event = e || window.event;
		var target = event.target || event.srcElement; 
		var title = target.getAttribute('title');
		if (!title) return;
		moveTitleIntoBox(target, idtitle);//перемещение текста из title в блок для всплыв. подсказки
		viewGTitle(idtitle, event.clientX,event.clientY);
		target.gactive = true;//запоминаем элемент, что бы при mouseout выполнялись функции исчезновения только для него.
		return false; 
	};
	document.onmouseout = function(e) {
		var event = e || window.event;
		var target = event.target || event.srcElement; 
		if(!target.gactive) return;//Элемент не активен? выход : продолжаем
		moveBoxIntoTitle(target, idtitle)
		hideGTitle(idtitle);
		target.gactive = false;
		return false;
	};
}

function viewGTitle(idtitle, x, y){
	$(idtitle).css({
		"position":"absolute",
		"top":y-4-$(idtitle).height()-parseInt($(idtitle).css("padding-top"))-parseInt($(idtitle).css("padding-bottom")),
		"left":x+4
	});
	$(idtitle).stop();
	$(idtitle).css("display", "block")
	$(idtitle).animate({
		opacity:1
	}, 400);
}

function hideGTitle(idtitle){
	$(idtitle).stop();
	$(idtitle).animate({
		opacity:0
	}, 400, function(){$(idtitle).css("display", "none");});
}

function moveTitleIntoBox(t, idtitle){
	var gtitletext = t.getAttribute('title');
	$(idtitle).empty();
	$(idtitle).append(gtitletext);
	t.removeAttribute('title');
}

function moveBoxIntoTitle(t, idtitle){
	t.setAttribute('title', $(idtitle).html());
}

Думаю хреновая идея. Нафига юзеру создавать элемент вручную? Это должен делать скрипт!
Забыл что пишешь "плагин jQuery" ?
А если на странице так уже навешан обработчик? Будет затерт? Поломка скриптов пользователя - он нафиг выкинет твой скрипт!Нафига все делается через атрибуты? Нужно использовать свойства, а не атрибуты: var title = target.title;

Не стоит засерать DOM-элементы своими свойствами. Это абсолютно ни к чему. Тем более в jQuery есть удобная система $(el).data('key', 'value')

Спасибо)
Буду доделывать.

Все сделал, но пришлось, при создании блока всплывающей подсказки, ставить z-index: 9999, это нормально или лучше по другому делать?

$(function(){
	initGTitle("#gtitle");//Инициализация
});

function initGTitle(idtitle){//idtitle - id блока для всплывающих подсказок.
	if(!$(idtitle).length){
		$('body').append('<div id="'+idtitle.substring(1)+'"></div>');
 		$(idtitle).css({
			"position":"absolute",
			"z-index":9999
		}); 
	}
	$(document).mouseover(function(e){
		var event = e || window.event;
		var target = event.target || event.srcElement; 
		if (!target.title) return;
		moveTitleIntoBox(target, idtitle);//перемещение текста из title в блок для всплыв. подсказки
		viewGTitle(idtitle, event.clientX,event.clientY);
		$(target).data("active", true)//запоминаем элемент, что бы при mouseout выполнялись функции исчезновения только для него.
		return false; 
	});
	$(document).mouseout(function(e){
		var event = e || window.event;
		var target = event.target || event.srcElement; 
		if(!$(target).data("active")) return;//Элемент не активен? выход : продолжаем
		moveBoxIntoTitle(target, idtitle);
		hideGTitle(idtitle);
		$(target).data("active", false);
		return false;
	});
}

function viewGTitle(idtitle, x, y){
	$(idtitle)
		.css({
			"top":y-4-$(idtitle).height()-parseInt($(idtitle).css("padding-top"))-parseInt($(idtitle).css("padding-bottom")),
			"left":x+4,
			"display":"block"
		})
		.stop()
		.animate({opacity:1}, 400);
}

function hideGTitle(idtitle){
	$(idtitle)
		.stop()
		.animate({
			opacity:0
		}, 400, function(){$(idtitle).css("display", "none");});
}

function moveTitleIntoBox(t, idtitle){
	$(idtitle)
		.empty()
		.append(t.title);
	t.title = "";
}

function moveBoxIntoTitle(t, idtitle){
	t.title = $(idtitle).html();
}

И еще вопросы:
Как и куда функция data запоминает информацию?
Как сделать без JQuery, чтоб мой обработчик не мешал пользовательскому?

В принципе в Инет реализациях z-index идет в обязательном порядке, хотя типично её закидывают в конец body, где она и так превышает любой не установленный z-index любого элемента, но не факт, что кто-то его не использует

Да, так как подсказка должна вылезти поверх любого элемента. Но 9999 - не предел. Гугли максимальный z-index. Это число кажется будет двойкой в какой-то степени.

Это лишнее. В обработчик событий jQuery передается особый jquery-объект события (похожий на нативный Event), так что все кроссбраузерно без костылей.
return false нафига тут залепил? В jQuery-обработчиках return false отменяет действие браузера по умолчанию, например переход по ссылке при клике, или прокрутка страницы при вращении колесика мыши. Для mouseover/mouseout нет действия по умолчанию..

Жесть. Каждый раз делать выборку по id?
Делай так при инициализации:

$el = $(idtitle);

и дальше уже используй $el во всем плагине

Все это сделал, плюс немного сократил код:

$(function(){
	initGTitle("#gtitle");//Инициализация
});

function initGTitle(idtitle){//idtitle - id блока для всплывающих подсказок.
	if(!$(idtitle).length){
		$('body').append('<div id="'+idtitle.substring(1)+'"></div>');
		var el = $(idtitle);
 		el.css({
			"position": "absolute",
			"z-index": 2147483647
		}); 
	}
	$(document).mouseover(function(e){
		var target = e.target;
		if (!target.title) return;
		//перемещение текста из title в блок для всплыв. подсказки
		el.empty().append(target.title);
		target.title = "";
		//показать подсказку
		el.css({
			"top":e.clientY-4-el.height()-parseInt(el.css("padding-top"))-parseInt(el.css("padding-bottom")),
			"left":e.clientX+4,
			"display":"block"
		})
		.stop()
		.animate({opacity:1}, 400);
		$(target).data("active", true)//запоминаем элемент, что бы при mouseout выполнялись функции исчезновения только для него.
	});
	$(document).mouseout(function(e){
		var target = e.target; 
		if(!$(target).data("active")) return;//Элемент не активен? выход : продолжаем
		target.title = el.html();
		//скрыть подсказку
		el.stop()
		.animate({
			opacity:0
		}, 400, function(){el.css("display", "none");});
		$(target).data("active", false);
	});
}

И опять вопросы:
Спасибо за ответы:)

Всяко в переменные. Посмотри исходники jQuery. Для связи с DOM-объектом у него определяется свойство навроде jQuery1362918094206:4.
Через el.addEventListener('eventtype', handler);