Tooltips

Deoarece mi s-a spus că scripturile scurte sunt utile, dar și pentru că am primit ceva cereri pentru acest subiect, m-am gândit să-ți arăt cum poți face tooltip-uri cu jQuery într-un mod foarte simplu. Îți voi arăta două feluri de tooltips: statice și cu conținutul preluat prin ajax.

De ce tooltips cu javascript? Primele motive ce-mi vin în cap sunt:

  1. Știi sigur că sunt afișate cum trebuie în toate browserele. Oricât de ciudat pare, atributul responsabil cu tooltips în browsere nu prea își face treaba. Sau cel puțin nu cum trebuie. Ba textul e trunchiat (dacă e prea lung), ba nu este afișat suficient de mult timp pentru a fi citit, ba e fontul prea mic, atributul title (căci despre el e vorba) se dovedește de multe ori insuficient pentru nevoile de zi cu zi.
  2. Le poți stiliza fix cum vrei tu. Le vrei negre, cu fundal semtransparent, și un glow subtil? Crezi că le poți face fără javascript? Mult succes!

Alternative

Înainte de a vedea cum poți face tooltips (într-un mod simplu, așa cum am făcut și până acum), hai să-ți prezit câteva alternative (în cazul în care chiar ți-e extrem de lene sau ești în criză de timp, sunt bune și astea):

Și alte câteva (zeci). Totul e să ai răbdare să le cauți. Oricum, cât timp ai pierde căutând și configurând un script pentru tooltip care habar n-ai cum funcționează și îți mănâncă și inutil de mult bandwidth-ul, ai putea sta cinci minute să încerci acest tutorial (care are o introducere mult prea mare :) )

Poți stiliza elementul în funcție de ce ai nevoie. De obicei, am folosit tooltips la mesaje scurte de ajutor (în pagină), prin urmare le stilizam fie cu o imagine cu litera „i” fie cu un semn al întrebării, tot imagine. De ce imagine? Simplu, pentru că arată mai bine :D

Tooltips statice

Varianta cea mai simplă este cea în care afișezi un tooltip în funcție de atributul title (sau alt, depinde ce preferi). Asta presupune un element cu o clasă și un titlu:
Citeste mai departe »

ING Homebank & Greasemonkey

De curând am renunțat la serviciile Băncii Transilvania în favoarea ING. Motivul principal pentru care am făcut această tranzacție este aplicația de homebanking. Care, pe lângă faptul că e cam urâțică (nu atât de oribilă ca bt24!), are o chestie enervantă: nu ține minte id-ul. Și cum memorarea secvențelor de numere nu reprezintă punctul meu forte, am făcut un mic script js (de fapt o linie de js) care îmi completează field-ul respectiv. Automat.

Pentru asta ai nevoie de extensia greasemonkey. După instalare, faci click dreapta pe icon-ul din dreapta jos, după care alegi new user script:

În fereastra apărută, completezi câmpurile după cum urmează:

După ce se deschide editorul de text, scrii următoarele:
Citeste mai departe »

Edit in place (EiP)

Dacă ai edit in place (EiP) pe site nu înseamnă că ai un site cool. Nu înseamnă că ai un site de succes. Nu înseamnă nici măcar că ai un site 2.0. De fapt, termenul de 2.0 a fost atât de folosit încât a început să fie evitat de majoritatea. Dacă stau bine să mă gândesc, nu știu de ce îl folosesc eu :D

Revenind. EiP înseamnă doar că îi oferi utilizatorului opțiunea de a edita un text fără a fi nevoie să părăsească pagina curentă. Desigur, EiP îl oferi doar unui utilizator înregistrat. Păi dacă e înregistrat, de ce să-ți mai bați capul? Că de plecat din site nu pleacă, nu? Păi el nu pleacă, dar asta nu înseamnă să-i facem în ciudă, nu? Câteva linii de cod se transferă mai repede față de o pagină întreagă. Sau cel puțin după matematica mea.

Markup

Dacă la sistemul de votare spuneam că avem un markup simplu, am cam mințit. Sunt deja două taguri, e stil inline, ce mai? E prea mult de scris! La EiP, markup-ul constă într-un SINGUR tag:
Citeste mai departe »

windows apple dropbox facebook twitter