În acest post o să vă arăt flexibilitatea lui jQuery care vine în ajutorul developerului pentru a simplifica anumite etape ale procesului de dezvoltare.

Despre jQuery în câteva cuvinte

  • jQuery este o librarie de Javascript redusă ca mărime ( 15kb )
  • una din primele librării de Javascript crossbrowser (IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+)
  • compatibilă cu toate versiunile de CSS

Ce fel de tooltip ne dorim?

Mi-am propus să realizez un tooltip simplu şi eficient pentru lamuriri adiţionale în completarea unui formular. În principiu am 2 soluţii de a realiza apariţia tooltip-ului:

  1. tooltip-ul apare la click (în situaţia în care userul simte nevoia unor explicaţii suplimentare dă un click pe icon-ul de help)
  2. tooltip-ul apare la mouseover

Dintre cele 2 opţiuni eu am ales-o pe cea de-a doua pentru ca îmi place să nu pun userul să facă acţiuni în plus pentru a vedea nişte informaţii pe care le doreşte (doar de-asta trăim în vremurile în care cuvântul de ordine în webdevelopment este uzabilitate). Ne dorim ca user-ului să-i fie cât mai uşor să utilizeze toate funcţiile site-ului.

Realizarea tooltipului cu ajutorul jQuery

În primul rând trebuie să ne punem scriptul să ruleze după încărcarea completă a paginii.

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

Pentru realizarea apariţiei tooltip-ului la mouseover vom folosi proprietatea obiectului object.mouseover(); iar selecţia o vom face după un pattern simplu: "selectează-mi toate imaginile care au clasa 'tooltip' ". În consecinţă codul nostru va arăta în felul următor.

 $("img.tooltip").mouseover(
/* $("img.tooltip") este selectorul nostru care face
selectia imaginilor care au clasa 'tooltip' */
function (event)
{
});

În pasul următor vom lua de pe imaginea noastră atributul alt a cărui valoare o vom afişa cu ajutorul tooltip-ului. Pentru asta va trebui să facem un <div> în care să afişăm informaţia explicativă. Vom avea nevoie şi de cunoştinţe de CSS pentru a putea stiliza obiectul şi pentru a-l putea duce în poziţia dorită de afişare. În cazul meu, CSS-ul este aşa:

#tooltip {
	position: absolute;
	font-family: Verdana, sans-serif;
	font-size: 10px;
	max-width: 150px;
	border: 1px solid #91C2DC;
	z-index: 10000;
	color: #333333;
	background:
 url('information.png') center left no-repeat #FFFFFF;
	margin: 10px 5px 5px 10px;
	padding: 20px 3px 3px 3px;
}

Să vedem cum arată Javascriptul pentru cele descrise mai sus:

$("img.tooltip").mouseover(
function (event)
{
   var text = this.alt;
/* tinem continutul proprietatii
alt in variabila 'text' */
   x = event.pageX+10;
/* sa mutam tooltipul putin mai la dreapta
 ca sa nu fie acoperit de cursor */
   y = event.pageY+10;
/* si putin mai jos... */
   $("body").append("
<div id='tooltip'>"+text+"</div>
 
");
/* mai intai facem un div [asta reprezentand
alternativa jQuery la DOM] */
   $("#tooltip").css("left", x).css("top", y);
/* si ne mai ramane doar sa-l mutam langa cursor */
}
);

OK, am făcut tooltip-ul, dar va trebui să-l distrugem la acţiunea object.mouseout(); şi cu asta suntem aproape gata.

$("img.tooltip").mouseout(
function (event)
{
  $("#tooltip").remove();
/* cand se intampla mouseout distrugem div-ul */
}
);

În funcţie de preferinţe mai rămâne doar să aranjăm totul într-o funcţie şi s-o folosim. Pentru asta eu am făcut un exemplu si de aici puteţi downloada scriptul complet.

Ceea ce tocmai am realizat e o variantă simplă şi nu se vrea în nici un caz o concurenţă la scripturile de tooltip existente, ci o aplicaţie a unor simple cunoştinţe de jQuery.

Orice părere, sugestie sau "reclamaţie" e bine-venită (folosiţi formularul din josul paginii)!