Graficzna prezentacja “title”

21/08/2009
przejdź do komentarzy

Dzięki prostemu skryptowi, w oparciu o jQuery, możemy w każdej chwili podmienić wszystkie systemowe znaczniki “title” na naszej stronie na ich graficzne odpowiedniki.

Jako punktu wyjścia użyłem skryptu Alen’a Grakalic’a. Wyświetlał on javascript’owe tooltipy dla określonej klasy linków. My chcemy osiągnąć efekt podmiany wszystkich znaczników “title” więc definiujemy funkcję globalnie dla wszystkich.


$("a").hover(function(e)

Tytuły pojawiają się jednak z pewnym opóźnieniem. Dodałem więc fragment kodu odpowiedzialny za opóźnienie wyświetlenia.


		    $.fn.wait = function(time, type) {
				time = time || 500;
				type = type || "fx";
				return this.queue(type, function() {
					var self = this;
					setTimeout(function() {
						$(self).dequeue();
					}, time);
				});
			};

cała funkcja JS:


this.tooltip = function(){ 

xOffset = 5;

yOffset = 5; 

$("a").hover(function(e){ 

this.t = this.title;

this.title = ""; 

$("body").append("<p id='tooltip'><i id='tooltip-'>"+ this.t +"</i></p>");

$("#tooltip")

.wait()

.css("top",(e.pageY - yOffset) + "px")

.css("left",(e.pageX + xOffset) + "px")

.fadeIn(100) 

},

function(){

this.title = this.t; 

$("#tooltip").remove();

});

$.fn.wait = function(time, type) {

time = time || 500;

type = type || "fx";

return this.queue(type, function() {

var self = this;

setTimeout(function() {

$(self).dequeue();

}, time);

});

};

$("a").mousemove(function(e){

$("#tooltip")

.css("top",(e.pageY - yOffset) + "px")

.css("left",(e.pageX + xOffset) + "px");

}); 

};

$(document).ready(function(){

tooltip();

});

CSS:


		#tooltip {height:26px; line-height:26px; font-family:Arial, Helvetica, sans-serif; font-size:13px; position:absolute; background:url('../img/bcg.gif') 0 0 no-repeat; padding-left:5px; display:none;}
		#tooltip- {font-style:normal; background:url('../img/bcg.gif') 100% 0 no-repeat; padding-right:7px; float:left;}

Efekt możemy zobaczyć tutaj.

Powiązane wpisy:

Tagi

title, tooltip,

Bartek Cymer