Tooltip-ovi i pretraživači

Zna li netko:

Ako neki tekst stavim u tooltip (dakle, u komentar koji se pojavi ako stavimo miša preko nekog linka), da li Google kad “skenira” stranicu, uočava i te tekstove, i da li i po njima određuje hoće li tu stranicu nuditi ako netko pretražuje za takav tekst?

[quote=“ahorvatek”]Zna li netko:

Ako neki tekst stavim u tooltip (dakle, u komentar koji se pojavi ako stavimo miša preko nekog linka), da li Google kad “skenira” stranicu, uočava i te tekstove, i da li i po njima određuje hoće li tu stranicu nuditi ako netko pretražuje za takav tekst?[/quote]

Ja sam nedavno postavio to pitanje i kolega je dao super linkove. Nakon proučavanja istih zaključak je ovaj:

Google ne indexira te tag-ove. Oni jednostavno služe tome da posjetitelj prije nego što klikne na link zna što ga na tom linku očekuje.

Dakle nema smisla napisati u titleu isto što piše i u anchoru (vidljivom dijelu linka).

Ovako kao si ti napravila na stranici sa videozapisom je super, ali izgleda da nema utjecaj na tražilice.

Hm, a baš bih voljela da tražilice ipak vide i to u tooltipovima, jer su tu neke dosta važne riječi…
A ako ih stavim vidljivima na stranicama, onda postaje malo nepregledno…

Vidi ovo od jučer:
http://www.webmajstori.net/forum/showpost.php?p=250851&postcount=449

Na prvom preporučenom linku piše:

A couple of years ago, Googlers confirmed they did not use TITLE attribute in the algorithm because it was used too seldom. This has changes since then but I still failed to spot any evidence that link TITLE attribute somehow influenced the rankings (you can run a simple test: include any non-existent word – that doesn’t exist in Google index – as a link title, wait for the link to be indexed, and in some time check if either the linking or linked page got ranked for that word).

[quote=“ahorvatek”]Zna li netko:

Ako neki tekst stavim u tooltip (dakle, u komentar koji se pojavi ako stavimo miša preko nekog linka), da li Google kad “skenira” stranicu, uočava i te tekstove, i da li i po njima određuje hoće li tu stranicu nuditi ako netko pretražuje za takav tekst?[/quote]

Na “stranica za apartmane” pređi mišem preko “galerija slika”. ( desno na zelenom ).
Ako potrazis prvu recenicu iz popup teksta “moderne galerije slika s opcijom grupiranja”, vidjet ćeš da je uredno indexirana i uredno rangira… Dakle, ako tako napraviš, google uredno vidi.

Btw, tema je za SEO

[quote=“digits”]Na “stranica za apartmane” pređi mišem preko “galerija slika”. ( desno na zelenom ).
Ako potrazis prvu recenicu iz popup teksta “moderne galerije slika s opcijom grupiranja”, vidjet ćeš da je uredno indexirana i uredno rangira… Dakle, ako tako napraviš, google uredno vidi.[/quote]

No, vrijedi li to baš za sve tooltipove, ili njihova vidljivost Googleu, ovisi o tome kako su izvedeni?
Moji tooltipovi su oni najjednostavniji, jednostavno u link po title dodam tekst…
(Na stranici koju si linkao baš i nije tako.)

Kad bih ja znala što je SEO…
Neka admin premjesti.

Znaš li zaista, hoće li i ovi obični tooltipovi biti vidljivi?

[quote=“ahorvatek”]No, vrijedi li to baš za sve tooltipove, ili njihova vidljivost Googleu, ovisi o tome kako su izvedeni?
Moji tooltipovi su oni najjednostavniji, jednostavno u link po title dodam tekst…
(Na stranici koju si linkao baš i nije tako.)
[/quote]

Upravo to. Moraš “ručno” napraviti tooltip (recimo div koji se pokaže on hover) da bi ga tražilica vidjela, a ne dodati samo title atribut u anchor tagu.

Neće.

Kako napravim to da se DIV pokaže samo na hover?
Može jedan mali kodić za primjer, pliz?

http://kreativnikod.com.hr/15/prikazi-sakrij-element-na-stranici

ok, hvala, budem to proučila…

U ovoj varijanti, kad stavimo miša preko teksta, tooltip se pojavljuje ispod njega, a tekst ispod tooltipa se pomakne.
To se lijepo vidi ovdje
http://kreativnikod.com.hr/demo/jQuery/show-hide-demo.html

  • kad mišem pređemo po 3. retku, onda se 4. i 5. redak pomaknu dolje.

Ima li koja varijanta u kojoj se tekst ispod ne pomiče, dakle da taj tooltip ne utječe na okolne tekstove (koji nemaju veze sa samim tooltipom)?

Inače, ja sam probala i ovo, ali mi nije proradilo kako treba,

http://public.carnet.hr/~ahorvate/pitanje/tooltips/proba-tooltip.htm

Na lijevoj strani uočite onaj “POKUSNI DIO”. Kad se tu prolazi mišem, svašta se događa:

  • pokazuju mi se dva tooltipa odjednom,
  • u IE onaj donji niti ne funkcionira kao tooltip (tooltip pridružen linku),
  • u FF i Chrome-u, taj dio gdje su tooltipi zna malo divljati po ekranu dok se mišem prelazi preko toga (sve se brzo miče gore-dolje)…

Stavila sam i onaj DOCTYPE kojeg preporučuju na

http://kreativnikod.com.hr/15/prikazi-sakrij-element-na-stranici

ali i tada radi isto kao sad, u svim preglednicima…

No, ima li koja druga vrsta tooltipa koja zadovoljava i onaj uvjet gore (koji sam već napisala) - da ne pomiče okolne tekstove?
I naravno, da ga Google prepoznaje…

Evo ko za tebe

[HTML]

matematički video - 5. razred - prirodni brojevi /* eh krenuo sam ispravljati krivu Drinu, pa sam odustao evo jedna stylesheet kako bi to stvarno trebalo izgledati */
		/* poništi margine i padinge na svim elementima */
		*, html { margin: 0; padding: 0; }
		
		/* postavi standardni izgled teksta(veličina, prored, font-family) i to sve u jednom redu. */
		body { font: 12px/1.5 Georgia, "Times New Roman", serif; }
		/* gornja linija zamjenjuje ove tri
		 * font-size: 12px; veličina fonta
		 * line-height: 1.5; prored
		 * font-family: Georgia, "Times New Roman", serif; familije fonta
		 * (ako nema Geogia fonta na računalu, koristi Times New Roman, a ako nema niti toga onda koristi defaultni serif font zadan od strane pretraživača) 
		 */
		
		/* idemo postaviti izgled "kontenjer"elementa koji će sve top skupa držati na okupu */
		#kontenjer { width: 960px; margin: 0 auto; background: #FFFFCC url("slike/pozadina11.gif") top left repeat;  overflow: hidden; }			
		/* opet koristimo skračenice, gornji margin znači slijedeće
		 * margin-top: 0;
		 * margin-right: auto;
		 * margin-bottom: 0;
		 * margin-left: auto;
		 * to smo još mogli napisati i ovako:
		 * margin: 0 auto 0;
		 * ili
		 * margin: 0 auto 0 auto;
		 * background -> postavljanje izgleda pozadine elementa
		 * zadnji atribut(overflow) je tu kako bi smo poništili "plivanje" elemenata("djece") unutar kontenjer elementa
		 */
		
		/* sad ćemo postaviti lijevi i desni element */
		#lijevi, #desni { float: left; width: 450px; }
		/* ovdje smo svojstvom float postigli da se elemneti sa id-om lijev i desni redaju jedan pored drugog umjesto jedan ispod drugog.
		 * i to na način da idu s lijeve na desnu stranu, da smo stavili svojstvo right za atribut float onda bi element s id-em desni bio s lijeve strane,
		 * a element s id-em lijevi bio na desnoj strani
		 * width smo stavili na 450 i time dobili mogučnost dodavanja margina i paddinga i bordera, čije vrijednosti sveukupno ne smiju biti veće od 30 px
		 */
		
		#lijevi, #desni { padding-left: 20px; }
		
		/* Odredimo poziciju Iframeu */
		#desni { position: relative; }
		#desni iframe { position: fixed; top: 120px; right: 500px; }
		
		
		/* ovo su oni linkovi na vrhu stranice */
		.breadcrumb { list-style: none; margin-left: 15px; }
		.breadcrumb li { display: inline; color: #666; }
		.breadcrumb a { text-decoration: none; }
		.breadcrumb a:hover { text-decoration: underline; }
		
		h1 { font-size: 18px; color: #000; text-decoration: underline; text-align: center; font-weight: normal; }
		
		
		/* Info element */
		.info { padding: 1px 4px; margin-top: 20px; background-color: #FFCC99; }
		
		/* Navigacija u lijevom dijelu */
		.navigacija { margin-top: 30px; }
		.navigacija dt { position: relative; }
		.navigacija a { text-decoration: none; }
		.navigacija a:hover { text-decoration: underline; }
		.navigacija h2 { text-transform: uppercase; font-size: 16px; font-weight: normal; margin: 10px 0; }
		
		.glavni-link { margin: 10px 0; }
		.glavni-link a { color: #00f; }
		.glavni-link a:visited { color: #c00; }
		
		.instruction { font-weight: bold; }
		
		.test { margin: 10px 0; }
		
		.sh { position: absolute; top: -35px; padding: 10px 5px; background-color: #FFCC99; display: block; }
		
		.footer { clear: both; padding: 10px 30px;}
		.footer .left { float: left; }
		.footer .right { float: right; }
	</style>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

	<script type="text/javascript">
		$(document).ready(function() {
			$('.sh').hide();
			// dodijelimo našem elementu funkciju za prijelaz mišem
			$('.show-hide').hover(
				// ovo funkcija se izvršava kada je pokazivač miša iznad elementa
				function() {
					$(this).next('.sh').show();
				},
				// ovo je funkcija kada se pokazivač miša makne s elementa
				function() {
					$(this).next('.sh').hide();
			});
		});
	</script>
</head>
<body>
	<!-- započinje stranica -->
	<div id="kontenjer">
		<!-- ovo su linkovi na vrhu, općenito nema potrebe stavljati linkove u paragrafe kad su liste za to puno prikladnije, mogu se još koristiti i tagovi dl, dt, dd  -->
		<ul class="breadcrumb">
			<li><a  href="../index.html">početna</a> ></li>
			<li><a  href="../materijali.html">matematički materijali</a> > </li>
			<li><a   href="index.htm">matematički video</a> > </li>
			<li>5.razred-1.cjelina</li>
		</ul>
		<!-- kraj navigacije na vrhu -->
		
		<!-- važan nam je i SEO, jel da? zato ćemo to omotati u jedan h1, a izgled definirati u css datoteci -->
		<h1>5. razred - 1. cjelina:&nbsp;&nbsp; Prirodni brojevi</h1>
		
		
		<!-- ide lijevi element u kojem će biti smješteni linkovi -->
		<div id="lijevi">
			<!-- info element -->
			<div class="info">
				<p>
					Stavite miša preko naslova filma da biste vidjeli opis.

					Klikom na naslov, izabirete film.
				</p>
			</div>
			<!-- završava info -->
			
			<!-- počinju linkovi, koristit ćemo dl i dt kako bi vidjela da je isto kao i sa ul li kombinacijom, a izgled svih zajedno ćemo definirati u css-u -->
			<dl class="navigacija">
				<dt>
					<a title="Znakovi < i >, kako ih čitamo, kad kojeg upisujemo. Kako čitamo n<5, n>8, 4<n<10 ? Koji brojevi to zadovoljavaju? Zadaci za vježbu." target="IFR" href="http://www.youtube.com/embed/o3XHiRKWtGE">Uspoređivanje prirodnih brojeva, znakovi < i > - 1.dio</a>
				</dt>
				<dt>
					<h2>Pokusni dio</h2>
				</dt>
				<dt class="instruction">
					Pređi mišem
				</dt>
				<dt class="test">
					<a class="show-hide" href="#">Link sa tooltip-om - PREĐI MIŠEM!</a>
					<span class="sh">Tekst koji se prikazuje - tooltip.</span>
				</dt>
				<dt class="test">
					<a class="show-hide" href="#">Drugi link sa tooltip-om - PREĐI MIŠEM!</a>
					<span class="sh">Drugi tekst koji se prikazuje - tooltip.</span>
				</dt>
				<dt class="glavni-link">
					<a title="Pojašnjenje pismenog postupka množenja, neki trikovi, zadaci za vježbu." target="IFR" href="http://www.youtube.com/embed/TfWd_xBAkL0">Pismeno množenje prirodnih brojeva</a>						
				</dt>
				<dt>
					<a title="Pojašnjenje pismenog dijeljenja, neki trikovi, zadaci za vježbu." target="IFR" href="http://www.youtube.com/embed/zoTIBlVfcmk">Pismeno dijeljenje prirodnih brojeva</a>
				</dt>
				<dt>
					<a title="Pojašnjenje kako rješavamo zadatke u kojima imamo samo zbrajanja i oduzimanja, ili samo množenja i dijeljenja. Zadaci za vježbu." target="IFR" href="http://www.youtube.com/embed/Ki9dfVVT5FI">Redoslijed računskih operacija - 1. dio</a>
				</dt>
				<dt>
					<a title="Pojašnjenje postupka rješavanja zadataka u kojima imamo sve četiri računske operacije. Zadaci za vježbu." target="IFR" href="http://www.youtube.com/embed/BUxkSJZoTHI">Redoslijed računskih operacija - 2. dio</a>
				</dt>
				<dt>
					<a target="IFR" title="Zadaci u kojima imamo sve četiri računske operacije i (okrugle) zagrade, s tim da unutar zagrada imamo samo jednu računsku operaciju. Zadaci za vježbu." href="http://www.youtube.com/embed/AODjJsuk28M">Redoslijed računskih operacija - 3. dio</a>
				</dt>
				<dt>
					<a title="Pojašnjenja kako rješavamo zadatke u kojima imamo (okrugle) zagrade u kojima se pojavljuje više računskih operacija. Zadaci za vježbu." target="IFR" href="http://www.youtube.com/embed/0lyDub2xIBM">Redoslijed računskih operacija - 4. dio</a>
				</dt>
				<dt>
					<a title="Pojašnjenja kako rješavamo zadatke u kojima imamo okrugle i uglate zagrade. Zadaci za vježbu." target="IFR" href="http://www.youtube.com/embed/zeo3YevxSDA">Redoslijed računskih operacija - 5. dio</a>
				</dt>
				<dt>
					<a title="Pojašnjenja kako rješavamo zadatke u kojima imamo vitičaste, uglate i okrugle zagrade. Zadaci za vježbu." target="IFR" href="http://www.youtube.com/embed/U6h_VqMIS1o">Redoslijed računskih operacija - 6. dio</a>
				</dt>
				<dt>
					<a title="Pojašnjenja kako rješavamo zadatke u kojima imamo zagrade unutar zagrada, ali su sve zagrade okrugle. Zadaci za vježbu." target="IFR" href="http://www.youtube.com/embed/tifLlCFRUqY">Redoslijed računskih operacija - 7. dio</a>
				</dt>
				<dt>
					<a title="Znakovi < i >, kako ih čitamo, kad kojeg upisujemo. Kako čitamo n<5, n>8, 4<n<10 ? Koji brojevi to zadovoljavaju? Zadaci za vježbu." target="IFR"  href="http://www.youtube.com/embed/o3XHiRKWtGE">Uspoređivanje prirodnih brojeva, znakovi < i > - 1.dio</a>
				</dt>
				<dt class="glavni-link">
					<a title="Pojašnjenje pismenog postupka množenja, neki trikovi, zadaci za vježbu." target="IFR" href="http://www.youtube.com/embed/TfWd_xBAkL0">Pismeno množenje prirodnih brojeva</a>
				</dt>
				<dt>
					<a title="Pojašnjenje pismenog dijeljenja, neki trikovi, zadaci za vježbu." target="IFR" href="http://www.youtube.com/embed/zoTIBlVfcmk">Pismeno dijeljenje prirodnih brojeva</a>
				</dt>
				<dt>
					<a title="Pojašnjenje kako rješavamo zadatke u kojima imamo samo zbrajanja i oduzimanja, ili samo množenja i dijeljenja. Zadaci za vježbu." target="IFR" href="http://www.youtube.com/embed/Ki9dfVVT5FI">Redoslijed računskih operacija - 1. dio</a>
				</dt>
				<dt>
					<a title="Pojašnjenje postupka rješavanja zadataka u kojima imamo sve četiri računske operacije. Zadaci za vježbu." target="IFR" href="http://www.youtube.com/embed/BUxkSJZoTHI">Redoslijed računskih operacija - 2. dio</a>
				</dt>
				<dt>
					<a target="IFR" title="Zadaci u kojima imamo sve četiri računske operacije i (okrugle) zagrade, s tim da unutar zagrada imamo samo jednu računsku operaciju. Zadaci za vježbu." href="http://www.youtube.com/embed/AODjJsuk28M">Redoslijed računskih operacija - 3. dio</a>
				</dt>
				<dt>
					<a title="Pojašnjenja kako rješavamo zadatke u kojima imamo (okrugle) zagrade u kojima se pojavljuje više računskih operacija. Zadaci za vježbu." target="IFR" href="http://www.youtube.com/embed/0lyDub2xIBM">Redoslijed računskih operacija - 4. dio</a>
				</dt>
				<dt>
					<a title="Pojašnjenja kako rješavamo zadatke u kojima imamo okrugle i uglate zagrade. Zadaci za vježbu." target="IFR" href="http://www.youtube.com/embed/zeo3YevxSDA">Redoslijed računskih operacija - 5. dio</a>
				</dt>
				<dt>
					<a title="Pojašnjenja kako rješavamo zadatke u kojima imamo vitičaste, uglate i okrugle zagrade. Zadaci za vježbu." target="IFR" href="http://www.youtube.com/embed/U6h_VqMIS1o">Redoslijed računskih operacija - 6. dio</a>
				</dt>
				<dt>
					<a title="Pojašnjenja kako rješavamo zadatke u kojima imamo zagrade unutar zagrada, ali su sve zagrade okrugle. Zadaci za vježbu." target="IFR" href="http://www.youtube.com/embed/tifLlCFRUqY">Redoslijed računskih operacija - 7. dio</a>
				</dt>
				<dt>
					<a title="Znakovi < i >, kako ih čitamo, kad kojeg upisujemo. Kako čitamo n<5, n>8, 4<n<10 ? Koji brojevi to zadovoljavaju? Zadaci za vježbu." target="IFR"  href="http://www.youtube.com/embed/o3XHiRKWtGE">Uspoređivanje prirodnih brojeva, znakovi < i > - 1.dio</a>
				</dt>
				<dt class="glavni-link">
					<a title="Pojašnjenje pismenog postupka množenja, neki trikovi, zadaci za vježbu." target="IFR" href="http://www.youtube.com/embed/TfWd_xBAkL0">Pismeno množenje prirodnih brojeva</a>
				</dt>
				<dt>
					<a title="Pojašnjenje pismenog dijeljenja, neki trikovi, zadaci za vježbu." target="IFR" href="http://www.youtube.com/embed/zoTIBlVfcmk">Pismeno dijeljenje prirodnih brojeva</a>
				</dt>
				<dt>
					<a title="Pojašnjenje kako rješavamo zadatke u kojima imamo samo zbrajanja i oduzimanja, ili samo množenja i dijeljenja. Zadaci za vježbu." target="IFR" href="http://www.youtube.com/embed/Ki9dfVVT5FI">Redoslijed računskih operacija - 1. dio</a>
				</dt>
				<dt>
					<a title="Pojašnjenje postupka rješavanja zadataka u kojima imamo sve četiri računske operacije. Zadaci za vježbu." target="IFR" href="http://www.youtube.com/embed/BUxkSJZoTHI">Redoslijed računskih operacija - 2. dio</a>
				</dt>
				<dt>
					<a target="IFR" title="Zadaci u kojima imamo sve četiri računske operacije i (okrugle) zagrade, s tim da unutar zagrada imamo samo jednu računsku operaciju. Zadaci za vježbu." href="http://www.youtube.com/embed/AODjJsuk28M">Redoslijed računskih operacija - 3. dio</a>
				</dt>
				<dt>
					<a title="Pojašnjenja kako rješavamo zadatke u kojima imamo (okrugle) zagrade u kojima se pojavljuje više računskih operacija. Zadaci za vježbu." target="IFR" href="http://www.youtube.com/embed/0lyDub2xIBM">Redoslijed računskih operacija - 4. dio</a>
				</dt>
				<dt>
					<a title="Pojašnjenja kako rješavamo zadatke u kojima imamo okrugle i uglate zagrade. Zadaci za vježbu." target="IFR" href="http://www.youtube.com/embed/zeo3YevxSDA">Redoslijed računskih operacija - 5. dio</a>
				</dt>
				<dt>
					<a title="Pojašnjenja kako rješavamo zadatke u kojima imamo vitičaste, uglate i okrugle zagrade. Zadaci za vježbu." target="IFR" href="http://www.youtube.com/embed/U6h_VqMIS1o">Redoslijed računskih operacija - 6. dio</a>
				</dt>
				<dt>
					<a title="Pojašnjenja kako rješavamo zadatke u kojima imamo zagrade unutar zagrada, ali su sve zagrade okrugle. Zadaci za vježbu." target="IFR" href="http://www.youtube.com/embed/tifLlCFRUqY">Redoslijed računskih operacija - 7. dio</a>
				</dt>
			</dl>	
		</div>
		<!-- završava lijevi -->
		
		<!-- ide desni element u kojem će biti smješten video -->
		<div id="desni">
			<iframe width="420" height="315" src="http://www.youtube.com/embed/TfWd_xBAkL0" frameborder="0" allowfullscreen name="IFR" style="border: 1px solid #000000; "></iframe>
		</div>
		<!-- završava desni -->
		
		<div class="footer">
			<a class="left" target="_blank" title="Hvala članovima foruma Webmajstori što su, za vrijeme mog petljanja po dizajnu ovih stranica, strpljivo odgovarali na moja 'visokoumna' pitanja." class="linksporedni" href="http://webmajstori.net/forum/">Webmajstori</a>
			<a class="right" href="../o_meni.html">Antonija Horvatek</a>
		</div>

	<!-- završava kontenjer -->
	</div>
[/HTML]

Sad sam samo nakratko nakompu ( u prolazu), ali sve mi se nekako čini da bi i ti htio bombonijeru… :-))))
Nadam se da ću ovo danas stići pogledati, pa se onda opet javim…
U svakom slučaju, veliko hvala!
Sad sam samo kopirala u Fromt Page i nakratko vidjela izlaz (zgodni tooltipovi), a detalje ću kasnije.

Evo, stigla sam pogledati i istestirati kod koji si mi dao.

Kao prvo, još jednom veliko hvala na trudu da mi napraviš profesionalni kod.
Međutim, nažalost, ja taj kod ne mogu prihvatiti odnosno ubaciti u svoj web, iz razloga što se ja u tome jednostavno ne snalazim dobro. Meni je teorijski tu sve jasno. Lijepo si mi napisao komentare, isto tako mi je aPazinjan neki dan sve prebacio u DIV-ove i sve pojasnio, i to je sve jasno dok ne krenem nešto mijenjati. Kako vršiti izmjene, a da se nastavi taj vaš profesionalni stil, da i ja dodam tj. napravim neki novi DIV, upišem mu sva svojstva kako treba, ostalim poizmjenjam što treba i kako treba - e , tu meni nastaje raspad sistema…

A moj web mora biti takav da se ja u njemu lako i brzo snalazim (on je meni samo pomoćno sredstvo za objavu materijala, a ne nešto čijim se ja izgledom i pozadinom imam vremena baviti, i stalno iznova testirati, tražiti po internetu kako nešto postići…). Ovaj vaš stil meni nije ni lak ni brz. Ja sam u zadnje vrijeme na proučavanje DIV-ova, CSS-a i dr. sličnih stvari, potrošila barem 3-4 puta više vremena nego što sam planirala, i nisam to uspjela savladati, A vremena za to više nemam.

Dakle,ostajem u pozicioniranju tablicama (za to sam specijalista, ako trebate instrukcije, tu sam ;-), a DIV-ove sam prihvatila u najnužnijoj mjeri - tek toliko da mogu fiksno pozicionirati onaj filmić koji želim da ne skrola. Dakle, našla sam način da to dvoje spojim, i na to ću nastaviti dalje. Nije da nikako ne želim ono bolje, nego jednostavno - ne mgu više trošiti vrijeme i energiju da prokužim kako te sve (meni apstraktne) kodove upisivati - ja stalno iznova zaboravljam što sam prekjučer o toma pročitala…

Dakle, puno ti hvala, i žao mi je što si potrošio toliko vremena, a ja sad to ne budem prihvatila. Ali zbilja ne mogu ja s tim izaći na kraj.

Da se sad vratimo na tooltipse, ovdje je zapravo i bila riječ o njima. Molim te da mi u vezi njih još do kraja pomogneš!

Ovaj tooltip koji si mi sad napravio, dobro radi, sve dok ne postane malo dulji. Naime, ako on počne sadržavati više redova, nastanu 2 problema:

  1. prvi je to da on prekrije sami link uz kojeg je vezan; to sam pokušala riješiti time da ga pozicioniram ispod (umjesto iznad) linka, no onda do izražaja dolazi drugi problem,a to je…

  2. drugi je taj da ako on krene preko teksta ispod tog linka (dakle, ako je to dosta dugačak tooltip), tada taj tooltip postane proziran (njegov donji dio), odnosno kroz njega se vidi i onaj tekst ispod, i sve postane nepregledno.

Ovdje su primjeri, kako to izgleda:

http://www.antonija-horvatek.from.hr/pitanje/tooltips/CreatifCode-03.htm

  • to je unutar tvog koda

http://www.antonija-horvatek.from.hr/pitanje/tooltips/5-1-OK-fiksed-3-tooltip.htm

  • ovo je prebačeno u moj kod (u kojem su izmiksani divovi i tablce), i malo je promijenjen stil tooltipa, ali to je zapravo taj tvoj, dakle tvoj tooltip sam ubacila u moj kod stranice.

U oba koda, te tooltipe sam pomaknula mrvicu udesno (left:30px), pa miša stavi na sami početak reda (prije tih 30px), da ti se tooltip smiri. Vidjet ćeš i sam što se događa ako ga staviš desnije ( u gornjem linku)…

Po mome, bilo bi dobro, ako se tooltip može pozicionirati ispod linka na koji se odnosi, ali naravno da ne bude proziran za one elemente koji dolje slijede. To bi riješilo sve probleme (čini mi se).
Možeš li to nekako podesiti?

Kad to napraviš, šaljem bombonijeru. :slight_smile:

.sh {
background-color: #FFFF66;
margin-top: 20px;
padding: 1px 5px;
position: absolute;
z-index: 100;
}

ovaj kod stavu umjesto postojećeg za .sh u svojoj datoteci. S margin-top ćeš odrediti koliko će tooltip biti pomaknut ispod linka.

Probaj pa javi jel ok tako.

[quote=“CreatifCode”]
Probaj pa javi jel ok tako.[/quote]

ODLIČNO!!! :slight_smile:
Radi ko zmaj!

http://www.antonija-horvatek.from.hr/pitanje/tooltips/5-1-OK-fiksed-8-tooltip-OK.htm

Šalji adresu za bombonijeru, nju si definitivno zaslužio. :slight_smile: Ovo mi je baš super kako radi, baš me razveselilo!

E, sad idu podpitanja (neka više neka manje važna, ali ako ti nije problem da mi razjasniš neke stvari…):

  1. 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?)

  2. Onaj z-index valjda ne mora biti tako velik, čak 100? Npr. dovoljno bi bilo da je 1, zar ne?

  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?
    Mislim na ovu uvjetnu naredbu

  4. Kako da smanjim razmak između teksta “POKUSNI DIO” i prvog linka ispod njega? (ako se uopće može)

  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)?

  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…

Nadam se da sam pitanja jasno napisala.

LP,
Antonija

CreatifCode, hoćeš li ti naći vremena odgovoriti na pitanja, ili da se i drugi uključe u odgovaranje?

Odgovrim ti ja večeras.

A jel smo mi u istoj vremenskoj zoni? :wink: