Tooltip-ovi i pretraživači

WPfanboy · prosinac 2011 09:37 6

Ovo je dovoljno za sve browsere

<!DOCTYPE html>

ahorvatek:

Kao što vidiš na linku kojeg sam gore dala, ja sam pokušala napraviti dvije vrste tooltipa (sa različitim bojama podloge…). To sam napravila tako da sam kopirala (poduplala) onu funkciju u JS, s tim da sam onda u jednu verziju umjesto sh pometala sh1, a u drugu sh2, pa sam u CSS-u definirala sve za sh1 i sh2.
Je li to u redu raditi tako (poduplavanjem funkcije u JS) ili ima neki pametniji način (da se iskoristi samo jednom definirana ta funkcija)?

Da li se možda nekim jednostavnim trikom može postići da se ovaj tooltip (kojeg si mi napravio) pozicionira tamo gdje je miš? Pogledaj kako se pozicioniraju oni ostali tooltipovi (na istoj gore linkanoj stranici) - na takvo pozicioniranje mislim.
Ovo zapravo i nije važno, ako nema neki gotovi jednostavni trik za to. Ali ako ima nešto jednostavno…

Evo primjer

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>

$(function(){

	$('a').mouseover(function(e){
	
		if(!$(this).attr('rel')) return;
		
		var classname = ($(this).attr('name')) ? 'class="' + $(this).attr('name') + '"' : '';
		
		$('body').append('<div id="tooltip"' + classname + '>' + $(this).attr('rel') + '</div>');
		$('#tooltip').fadeIn().css({top: (e.pageX + 5) + 'px', left: (e.pageY + 10) + 'px'});
	
	}).mousemove(function(e){
	
		$('#tooltip').css({top: (e.pageY + 10) + 'px', left: (e.pageX + 5) + 'px'});
		
	}).mouseleave(function(){
	
		$('#tooltip').remove();
		
	});
	
});

</script>

<style>
#tooltip{
	display: none;
	position: absolute;
	padding: 5px;
	background-color: white;
	border: 1px solid black;
	max-width: 250px;
}
/* razlicite boje pozadine tooltipa */
.crveni{
	background-color: red !important;
}
.zeleni{
	background-color: green !important;
}

</style>

	<title>tooltip</title>
</head>
<body>
Tooltip se pokazuje samo ako link sadrzi rel atribut.
Primjeti jos i name atribut (ako ga ima), to je naziv klase koja ce se dodati tooltipu pa tu mozes definirati razlicite boje pozadine



<a href="#" rel="tooltip 1 crveni tooltip 1 crveni tooltip 1 crveni " name="crveni">link 1</a>

<a href="#" rel="tooltip 2 bili">link 2</a>

<a href="#" rel="tooltip 3 zeleni" name="zeleni">link 3</a>

<a href="#">obican link bez tooltipa</a>

</body>
</html>

creatifcode · prosinac 2011 12:56 6

[quote=“ahorvatek”]ODLIČNO!!!

Iako vidim da si (u odnosu na onaj prvi kod koji si mi dao), ovdje iz .sh izbacio onaj “display: block”, ja sam ga ipak ostavila. Hoće li mi to nešto kvariti …? Ili ga baš trebam izbaciti? (Što on uopće radi?)[/quote]
Postoje elementi kojima je prikaz kao block, a ima i onih kojima je prikaz kao inline. Tablice imaju tablični prikaz itd.
Span element spada pod one elmente kojima je početni prikaz(display) postavljen kao inline i on se pojavljuje u istom redu u kojem se pojavljuje i ostali sadržaj. Dok kod block načina prikaza element bude prebačen u novi red i poslije njega sav sadržaj ide u novi red. To je osnovna razlika, ostale razlike su npr. da inline elementu ne možeš odrediti širinu, visinu, margine itd.
[SIZE=“2”][1][/size]

U principu si u pravu, ali nikad ne znaš da li ćeš još nešto dodavati pa ti se može dogoditi npr. da ti novo dodani sadržaj prekrije dio ili cijeli tooltip ili općenito element sa niskim z-indeksom. Zato se u principu sliderima tooltipovima i inim sličnim elementima daje dosta visok z-index. Ovo je malo kompliciranije za objasniti bez slika, ali ovo bi ti trebalo biti dovoljno jasno.
[SIZE=“2”][2][/size]

[quote=“ahorvatek”]3. U onom prvom kodu, stavio si mi napomenu da obavezno mora ići onaj DOCTYPE kojeg si tamo stavio. Koliko ja vidim, on je obavezan samo za IE, dok FF i Chrome rade bez problema i bez njega, a zapravo taj DOCTYPE mi u FF čak i kvari neke stvari (neke fontove…).
Je li onda u redu da stavim onu uvjetnu naredbu, da samo za IE vrijedi taj DOCTYPE? Ili imaš beš neki razlog (kojeg ja ne vidim) da baš moram taj isti DOCTYPE za sve preglednike? [/quote]
Kao što je Ante rekao dovoljno je u principu staviti i ali on će biti funkcionalan samo u novijim verzijama preglednika, a za IE je to od verzije 9. Dakle verzije IEa manje od verzije 9 ne podržavaju ovaj doctype i prebacuju se u quirkmode[SIZE=“2”][3][/size] način rada. Doctype je ključna komponenta za validaciju stranice prema preporukama W3C konzorcija, a između ostaloga ima za ulogu ispravno renderiranje i funkcioniranje web dokumenata u svim modernijim preglednicima. U slučaju da ti se neke stvari kvare ili ne prikazuju kako bi trebale, onda bi te stvari trebalo popraviti i srediti, a ne negirati doctype naredbu.
[SIZE=“2”][4][/size]

Naravno da se može. Naime u datoteci stil-video-08.css u linij borj 30 definirana ti je klasa .navigacija koja ima jednu vrijednost, a to je margin-top: 30px; po želji samnji taj broj i to je to.

[quote=“ahorvatek”]5. Kao što vidiš na linku kojeg sam gore dala, ja sam pokušala napraviti dvije vrste tooltipa (sa različitim bojama podloge…). To sam napravila tako da sam kopirala (poduplala) onu funkciju u JS, s tim da sam onda u jednu verziju umjesto sh pometala sh1, a u drugu sh2, pa sam u CSS-u definirala sve za sh1 i sh2.
Je li to u redu raditi tako (poduplavanjem funkcije u JS) ili ima neki pametniji način (da se iskoristi samo jednom definirana ta funkcija)?[/quote]
Može ovako kako ti je i ante napisao, ali mislim da je prekomplcirano. Postoji i način da jednostavno u css datoteci odradiš izgled za svaki tooltip posebno i jednostavno tom elementu dodaš u class atribut i novo napravljenu klasu. npr.
css
[HTML]
.sh {
font-size: 10pt;
left: 10px;
margin-top: 5px;
padding: 5px 10px;
position: absolute;
z-index: 5;
}

.zuti-tooltip {
background-color: #FFFFB9;
border: 1px solid #000000;
}
.zeleni-tooltip {
background-color: #EEFFB9;
border: 1px solid #009900;
}

[/HTML]

Dakle vidiš da je sh ostao isti, a dodali smo dva nova elementa zuti i zeleni tooltip kojima smo odredili njihova svojstva koja su drugačija u odnosu na originalni tooltip.

i sad u svom kodu dodaješ samo ovu klasu postojećoj klasi
[HTML]
Link sa tooltip-om - PREĐI MIŠEM!
…

Link sa tooltip-om - PREĐI MIŠEM!
…

Link sa tooltip-om - PREĐI MIŠEM!
…
[/HTML]
i na ovaj način ne moraš duplati js kod za svaki element na kojemu želiš drugačiji tooltip.

Sad možeš napraviti i crveni tooltip klasu i plavi tooltip i koakav god hoćeš.

[quote=“ahorvatek”]6. Da li se možda nekim jednostavnim trikom može postići da se ovaj tooltip (kojeg si mi napravio) pozicionira tamo gdje je miš? Pogledaj kako se pozicioniraju oni ostali tooltipovi (na istoj gore linkanoj stranici) - na takvo pozicioniranje mislim.
Ovo zapravo i nije važno, ako nema neki gotovi jednostavni trik za to. Ali ako ima nešto jednostavno…[/quote]
Ovo pitanje nisam baš skužio s obzirom da ne znam na koju stranicu i na koje tooltipove misliš, ali te možda može zadovoljiti rješenje koje ti je dao antelaca.

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

http://reference.sitepoint.com/css/z-index

http://www.alistapart.com/articles/doctype/

http://www.w3schools.com/tags/tag_doctype.asp

Evo nadam se da sam pomogao, ako imaš još kojih pitanja slobodno pitaj

ahorvatek · prosinac 2011 16:34 6

antelaca i CreatifCode,
puno hvala na kodovima za tooltipe!
Oba mi rade kako treba. Još ću vidjeti kojeg ću na kraju koristiti.

Antin ima i neki fade-efekt, a i šeće sa mišem… simpa za vidjeti.
Još ću malo testirati, pa uspoređivati…

ahorvatek · prosinac 2011 16:44 6

CreatifCode, hvala i na svim pojašnjenjima. Samo kratki odgovori na neke detalje:

Ma dobro, ne treba negirati.
Uz onu uvjetnu naredbu u kojoj definiram DOCTYPE za IE, može ići još jedna naredba u kojoj definiram i DOCTYPE za sve ostale preglednike.
Dakle, u svakom pregledniku bude definiran neki DOCTYPE…

Pa mislim na istu onu (moju) stranicu koju sam već linkala u tom postu.
Na toj stranici, u onom “POKUSNOM DIJELU” sam koristila tvoj kod za tooltip, a izvan tog dijela su oni najobičniji tootlipovi koje dobivam sa title="…", a ti se pozicioniraju tamo gdje staviš miša (ne na početak reda, ili poziciju koju odrediš sa left).
No, za razliku od antinih, ti tooltipovi i ostanu na toj poziciji (ako miša pomakneš lijevo-desno), a antin šeće sa mišem.

Hvala i za linkove!

A ovo rješenje da se u class stavljaju dva odjednom, npr. “sh zuti”… - svašta! :-)))
Neočekivano! Ali super radi.

Sad odoh na testiranje i primjenu, pa ako niknu nova pitanja, javim se. Za sad ih nemam (čudo jedno)!

ahorvatek · prosinac 2011 20:56 11

Evo ipak još jedno pitanje (za CretifCode ili bilo kog drugog).
Samo još jedan detalj na ovoj stranici ne radi kako treba,

http://www.antonija-horvatek.from.hr/pitanje/tooltips/5-1-prirodni-brojevi-END.htm
.

Kad stavimo miša preko linka npr. “Redoslijed računskih operacija (2.dio).”, u IE i Chromeu mi dio tooltip-a pobjegne ispod filma.
(U FF radi kako treba.)

Tooltip ima z-index 20, a film z-index 15.

Očito IE i Chrome ovdje ne poštuju taj z-index.

Jesam li ja nešto krivo definirala…?
Može li se nekako natjerati da tooltip dođe iznad?

(A širinu tooltipa od 500 px bih rado zadržala.)

ahorvatek · prosinac 2011 14:55 12

Izostanak odgovora vjerojatno znači da nema pomoći?
Onda valjda moram smanjiti width tog tooltipa, da ne ide preko filma…