🚀 go-pugleaf

W dniu 24.03.2011 09:12, zlotowinfo pisze:
>
> Użytkownik "Peter May" <peter.may@onet.pl> napisał w wiadomości
> news:ime08c$5aj$1@news.onet.pl...
>> W dniu 23-03-2011 23:31, zlotowinfo pisze:
>>> znalazłem, chyba już prościej się nie da ;p
>>>
>>> <STYLE TYPE="text/css" MEDIA=screen>
>>> a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must
>>> for IE6*/
>>> a.tooltip span {display:none; padding:2px 3px; margin-left:8px;
>>> width:130px;}
>>> a.tooltip:hover span{display:inline; position:absolute;
>>> background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}
>>> </STYLE>
>>>
>>> Easy <a class='tooltip' href='#'>Tooltip<span>This is the crazy little
>>> Easy Tooltip Text.</span></a>.
>>
>> Beznadziejne. Zwłaszcza w kontekście tego, do czego jest atrybut title:
>> http://www.w3.org/TR/html4/struct/global.html#adef-title
>>
>
> no cóż działa, i jest wygodne
> proszę o ciekawszą propozycję
>



$(document).ready(function()
{
	var $tip=$('<div id="tooltip"></div>').appendTo("body").hide();

	var pokaz = function(event)
		{
		var path="tooltip";
		var name=$(this).attr("name");
		$.get(path + "/" + name + ".php",function(data) { $tip.html(data); });
		
		var offset = $(this).offset();
		tPosX=offset.top+$(this).height();
		tPosY=offset.left;
		if (tPosY>$(document).width()/2)
			{
			tPosY=offset.left+$(this).width()-$tip.width()-10;
			};
		$tip.css({"top": tPosX, "left": tPosY}).fadeIn(500);
		};

	var ukryj = function()
		{
		$tip.hide();
		};

	$("[name].showToolTip").hover(pokaz,ukryj);
	$tip.mouseout(ukryj);
});



Tootipy w katalogu /tooltip

Pojedynczy tootip w pliku np: dodaj_galerie.php ale może być tez w pliku 
html jak ktos chce - w skrypcie powyżej zmienić .php na .html

<table>
<tr>
<td style="width:50px;vertical-align:middle;text-align:center;"><img 
src="pictures/dokument.png"></td>
<td 
style="width:150px;vertical-align:middle;text-align:center;">Przeczytaj 
Faq!</td>
</tr>
</table>


no i css


#tooltip
{
	display:none;
	color:#000;
	position: absolute;
	z-index: 1020;
	font-family:"Tahoma",Verdana,Arial,Helvetica,sans-serif;
	font-size: 12px;
	padding-left:5px;
	padding-right:5px;
	padding-top:5px;
	padding-bottom:5px;
	background-color:#a7b3bf;
	border-bottom:3px solid #eaebec;
	border-top:3px solid #eaebec;
	border-left:3px solid #eaebec;
	border-right:3px solid #eaebec;
	-moz-border-radius-bottomleft: 15px;
	-webkit-border-bottom-left-radius: 15px;
	border-bottom-left-radius: 15px;
	-moz-border-radius-bottomright: 15px;
	-webkit-border-bottom-right-radius: 15px;
	border-bottom-right-radius: 15px;
	width:250px;
}

a w kodzie strony

<a href="galeria_dodaj.php" id="content_top.php" class="showToolTip" 
name="dodaj_galerie">Dodaj galerię</a>


gdzie name zgodne z nazwą pliku w katalogu /tooltip