Własne tooltips

Baloniki (tooltip) to małe okienka zawierające podpowiedzi (w domyślnym ustawieniu z jasnożółtym tlem) które ukazują się gdy najedziemy na jakiś element. W standardowym Html'u możemy takie elementy definiować za pomocą atrybutu title:

	<a href="..." title="Kliknij ten guzik aby...">Kliknij</a>
	

Niestety atrybut title nie daje nam możliwości zbytniego upiększania i formatowania siebie (i bardzo dobrze!). Aby pokazywać własne "ładne" okienka z podpowiedziami, musimy je zrobić sami - co z resztą nie jest wcale tródne.

Tworzenie baloników za pomocą CSS

Najprostsza metoda! Wystarczy każdy balonik wstawić do linka. Ustawiamy linkowi pozycjonowanie relatywne, tooltipowi pozycjonowanie absolutne. Dodatkowo tooltipa ukrywamy, odsłaniając go tylko wtedy, gdy użytkownik najedzie (hover) na link.

Kod przykładowego linka z tooltipem ma postać:

	<a href="...." class="aTooltip">Magiczny link
		<span>Podpowiedź do magicznego linka</span>
	</a>
	

a ostylowanie dla tego linka i tooltipa ma postać:

	a.aTooltip {
		position:relative;
	}

	a.aTooltip span {
		display:none;
	}

	a.aTooltip:hover span {
		position:absolute;
		display:block;
		bottom:-20px; 
		left:10px;
		width:200px;
		height:50px;
		background:#FFCC66;
		color:#333;
	}
	

I to właściwie koniec. Oczywiście ostylowanie trzeba pewnie mocno poprawić. Można zawsze do takiego tooltipa wrzucić dodatkowy span, czy inny znacznik, który ułatwi nam dodanie padding (w postaci margin) itp. Całkiem dobre efekty daje zastosowanie półprzezroczystości czyli:

	filter:alpha(opacity=80);
	opacity:0.8;
	-moz-opacity:0.8;
	

Tworzenie baloników w JS

Przypuśćmy jednak, że nie chcemy naszego kodu HTML "brudzić" dodatkowymi tooltipami z podpowiedziami. Możemy przecież takie tooltipy tworzyć dynamicznie gdy ktoś najedzie na odpowiednie linki.

Działanie też nie będzie tródne. Wystarczy pobrać ze strony wszystkie linki z klasą aTooltip (patrz poprzedni przykład), a nstępnie przypisać im zdarzenie onmouseover i onmouseout, które odpowiednio będą tworzyć i usuwać nasze tooltipy.

Ostylowanie tooltipów i linków będzie podobne jak w poprzednim przykładzie, jednak odpadnie nam cały styl związany z hover:

	a {
		position:relative;
	}
	a span {
		display:block;
		position:absolute;
		bottom:-10px;
		left:10px;
		width:200px;
		height:50px;
		background:#FFCC66;
		text-decoration:none;
		color:#333;
	}
	

Funkcje pokazujące i usuwające tooltipy mają postać:

	function pokazBalonik() {
		var tekst = document.createTextNode(' podpowiedz '); //Tworzymy tekst podpowiedzi
		var tooltip = document.createElement('span'); //Tworzymy tooltipa
		tooltip.className = 'tooltip'; //Nadajemy mu klasę
		tooltip.apendChild(tekst); //Wstawiamy tekst do drzewa dokumentu (do tooltipa)
		this.appendChild(tooltip); //Wstawiamy tooltipa w drzewo dokumentu (w link)
	}

	function usunBalonik() {
		var tooltip = this.getElementsByTagName('span'); //pobieramy tooltipa
		tooltip.parentNode.removeChild(tooltip); //i go usuwamy ^^
	}
	

Teraz wystarczy pobrać wszystkie linki z klasą aTooltip i przypisać im nasze funkcje. Pobieramy więc wszystkie linki z dokumentu, po czym sprawdzamy które z nich mają odpowiednią klasę, przypisując im pod odpowiednie zdarzenia powyższe funkcje:

	var a = document.getElementsByTagName('a');
	for (x=0; x<a.length; a++) {
		if (a[x].className == 'aTooltip') {
			a[x].onmouseover = pokazBalonik;
			a[x].onmouseout = usunBalonik;
		}
	}
	

Niestety! Powyższa metoda JS ma olbrzymie ograniczenie! Przecież nigdzie nie ustawialiśmy dynamicznie tekstu, który będzie się pojawiał w tooltipach. W każdym tooltipie będzie taki sam tekst! Takie tooltipy możemy wykorzystać np to podpowiedzi, który link jest wewnętrznym, a który prowadzi do źródeł zewnętrznych. Zawsze też można wykorzystać atrybut rel linków lub nowy atrybut data- istniejący w HTML5. Nasz przykład jest na tyle prostacki, że nie wykorzystuje tych prostych sposobów. Przekazywanie tekstu do tooltipów pozostawiam jako pracę domową. Na tym poziomie wiedzy nie będzie to zbyt trudne (wystarczy korzystać z metody .getAttribute()). Jeżeli jesteś jednak nieco leniwy, korzystaj z metody z użyciem CSS - jest szybka, łatwa i przyjemna.