🚀 go-pugleaf

On 2011-03-23 18:04, zlotowinfo wrote:
> szukam możliwie najmniejszego skryptu tooltip
> ktory poradzi sobie z tym poniżej
>
> <a href='http://wp.pl' onmouseover="tooltip('Portal Wirtualna Polska')"
> onmouseout="tooltiphide()" >WP</a>

<a href='http://wp.pl' title='Portal Wirtualna Polska'>WP</a>

> <a href='http://onet.pl' onmouseover="tooltip('Portal Onet')"
> onmouseout="tooltiphide()" >ONET</a>

<a href='http://onet.pl' title='Portal Onet'>ONET</a>


-- 
message[autor="PablO"]::after {
	content:"Pozdrawiam";
}

to znam, ale ja chcę w kilku linijkach zapisy
i tak żeby odrazu się pojawiało nie po sekundzie jak title
myślałem nad alert jest trochę za bardzo upierdliwy bo trzeba kliknac

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>.

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

-- 
Peter

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ę

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

> Tootipy w katalogu /tooltip
>
tożto strasznie niewygodne do każdego dymka oddzielny plik? masakra

W dniu 24-03-2011 14:13, zlotowinfo pisze:
>> Tootipy w katalogu /tooltip
>>
> tożto strasznie niewygodne do każdego dymka oddzielny plik? masakra

To może coś takiego:
http://skroc.pl/f32a

-- 
Peter

W dniu 24.03.2011 14:13, zlotowinfo pisze:
>> Tootipy w katalogu /tooltip
>>
> tożto strasznie niewygodne do każdego dymka oddzielny plik? masakra
>
Może i niewygodne, ale każdy tooltip może mieć np inną ikonkę wewnątrz 
siebie - lub pokazywać inne dane np. dla użytkownika zalogowanego lub 
niezalogowanego. Zresztą to tylko przykład - nie trzeba brać wnętrza 
toolipa z pliku - można wygląd tooltipa zdefiniowac na stałe - a opis 
brać np z name