Twitter Bootstrap: informaţii plutitoare


Informaţii plutitoare sună prea abstract? Nu şi dacă aţi privit la captură (exemplul live e aici), de unde cel puţin cu termenul tooltip v-aţi luminat. Vom vedea mai încolo şi ce e cu popover, dar să o luăm cu începutul. Navigatoarele oferă implicit un sistem de tooltip, pur şi simplu indicând un title la link, imagine… Dar nu e foarte estetic, nici configurabil. Ei bine, cu Twitter Bootstrap lucrurile se simplifică puţin. Trebuie însă să folosim puţin JavaScript, linia esenţială fiind $(‘[rel=ajutor]’).tooltip();

imagine

După cum bănuiţi, în loc de [rel=ajutor] putem pune ce selector dorim. Eu am pus acesta, astfel că un link cu rel="ajutor" va avea automat arătat ce este în title ca şi tooltip. Foarte simplu. Şi tot după cum bănuiţi, funcţia tooltip() admite parametrii, şi documentaţia de aici vă explică mai multe. În exemplu pe care vi-l propun putem vedea cum putem muta informaţia afişată deasupra în patru direcţii posibile… şi mai mare noutate faţă de tooltip-ul nativ din navigator este că suportă HTML! Yep, cool! În a doua coloană am folosit tooltip-ul pe o imagine. Dar atenţie: am încercat să schimb culoarea neagră implicită. Cum? Priviţi în cod la partea de JavaScript şi veţi vedea: soluţia este relativ simplă.

<p>Uite o primă <a href="#" rel="ajutor" title="Stai calm!">indicaţie</a> nemaipomenită.</p>
<p>Uite o <a href="#" rel="ajutor" data-placement="right" title="Stai calm!">indicaţie</a> la dreapta.</p>
<p>Uite o <a href="#" rel="ajutor" data-html="true" title="Stai <i><b>calm</b></i>!">indicaţie</a> cu HTML!</p>
<p rel="ajutor" data-placement="bottom" title="E un hint pe toată linia!">Uite o a doua  nemaipomenită.</p>

Şi acum să trecem la popover (documentaţia oficială). Este tot un fel de tooltip dar care are implicit o structură mai elegantă şi dezvoltată, cu o bară de titlu şi sub ea conţinutul. Implicit se declanşează la click, deci pe butonul albastru şi cel verde trebuie să daţi click ca să vedeţi ceva. În schimb pe butoanele roşu şi galben ajunge să treceţi mouse-ul. Cum am făcut comportamentul diferit? Observaţi mai jos în cod data-trigger. Ca un bug aş semnala că dacă textul de afişat e de un singur rând, popover-ul în lateral nu se vede bine (vedeţi la butonul verde). Apoi tot ca minus să spunem că nici una din cele două componente tocmai prezentate nu “miros” marginile ferestrei astfel încât să se rearanjeze corespunzător. Există soluţii mai bune la acest capitol, dar Twitter Bootstrap oferă ceea ce pentru mulţi va fi suficient, mai ales dacă ai grijă în ce direcţie laşi să se deschidă informaţia plutitoare.

<p><a href="#" class="btn btn-info" rel="ferastruica" data-placement="left" data-content="Nimic important de spus, deşi ar fi frumos să am ceva profund - măcar util - de spus." title="La stânga!">La stânga</a>
<a href="#" class="btn btn-success" rel="ferastruica" data-placement="right" data-content="Nimic important de spus..." title="La dreapta!">La dreapta</a></p>
<p><a href="#" class="btn btn-danger btn-large" rel="ferastruica" data-trigger="hover" data-placement="top" data-content="Nimic important de spus..." title="Sus!">Sus</a>
<a href="#" class="btn btn-warning btn-large" rel="ferastruica" data-trigger="hover" data-placement="bottom" data-content="Nimic important de spus...Doar că acum punem şi o imagine. Se va scala automat.<br><img src='http://www.cnet.ro/wp-content/uploads/2013/01/imagine70.jpg' class='img-polaroid'>" data-html="true" title="Jos!">Jos</a></p>

Sper că v-am convins cât de simplu este. Revedeţi aici pagina demonstrativă şi priviţi-i sursa dacă mai sunt neclarităţi.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (5 evaluări, media: 5,00 din 5)
Loading...Loading...

1 comentariu

  1. Andrei spune:

    Am vazut ca mai scrii de bootstrap. Vroiam sa te intreb ce parere ai de un framerwork css cum e acesta?
    Adica da, te ajuta foarte foarte mult cand faci site-uri de la zero, dar nu exista un risc ca toate sa arate intre ele? Sau daca multa lume o va folosi, nu exista riscul ca multe site-uri sa arate la fel? Ce crezi?


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *