Tooltip pomocou CSS
Viete čo je to tooltips?
Ak nie, tak ide o tú malú vysúvaciu poznámku napr. pri odkazoch, obrázkoch a iných prvkoch na stránke ktoré majú zadané title tzv. bublinková nápoveda.
Tu je ukážka pre tých čo stále nevedia o čo ide.
Prehliadač nám dokáže sám tieto poznámky zobraziť, ale čo ak chceme túto poznámku mať naformátovanú podľa našich predstáv?
Riešením by mohol byť tooltip tvorený pomocou CSS. Ako inšpiráciu k tomuto príspevku som použil článok z www.madaboutstyle.com.
A teraz už k samotnej ukážke.
a.info {
position: relative;
z-index:24;
background-color:#ccffff;
color:#000;
text-decoration:none
}
a.info:hover {
z-index:25;
background-color: #ffccff;
color:#ff6633;
}
a.info span {
display: none
}
a.info:hover span {
display:block;
position:absolute;
top:2em;
left:2em;
width:15em;
border:1px solid #f30;
background-color:#c5f5a7;
color:#000;
text-align: left;
padding: 0.1em
}<a class="info" href="#">text odkazu <span> a sem
napíšte text bublinovej nápovedy, ktorá sa zobrazí ak nad
odkaz prídete s kurzorom myši.</span></a>Základným kameňom (teda ak to tak môžem nazvať) je v tomto príklade definícia position:relative; pre odkaz <a class=„info“> a prvok span, ktorý má naopak zadané absolútne poziciovanie position:absolute; a obsahuje samotný vysúvací text.
Ukážka je použitá na odkaz <a> z dôvodu že Internet Explorer podporuje vlastnosť :hover, len na odkazy.
Keby nebolo týchto obmedzení, tak by sme mohli použiť danú ukážku pre ktorýkoľvek prvok na našej stránke.
Autor ukážku testoval v prehliadaèoch IE5.5, Opera7.11 a Mozilla 1.4.
Opera od verzie 7.2 má bohužiaľ problém pri danom príklade, asi nejaký jej bug.
Verzia pre tlač
Ďalej môžeme pri danom príklade nadefinoval, aby sa nám pri verzii pre tlačiareň zaradil náš popisok za odkaz.
Použijeme pseudo-prvky :before a :after, ktoré nám generujú obsah pred a za daným prvkom.
Bohužiaľ je to riešenie len pre inteligentnejšie prehliadaèe, ako Opera a Mozilla, IE zostal opäť mimo hru.
@media print{
body {font-size: 10pt}
div#main {margin: 0 0.5cm}
a.info {background-color: #fff; color: 000}
a.info span {display: inline;font-style: italic}
a.info span:before {content: " ["}
a.info span:after {content: "] "}
div#counter {display: none}
}Páči sa vám tento článok, zalinkujte ho:
««« Predchádzajúci text: Eric Meyer o CSS Následujúcí text: Orava vám prináša nové dimenzie »»»
Verzia pre tlač | 8 komentárov | 1902x
Komentáre k textu
Rss komentářů tohoto textu - Formulár pre nový komentár
1. preco iba poukazujes na tipy? k tomu este vyse roka stare. 2. preco nepises aj vlastne clanky? 3. abbr nepouzivas korektne
1. Každý musí nejako začať, a chystám sa to prerobiť s priehladným pozadím a dám tomu aj oblé rohy. 2. Teraz som robil novú Knihu návštev tak som zanedbal všetko ostatné. Stránku robím len vo volnom čase a toho veľa nieje. A nie som zamestnaný pri počítači, robím na montážach. 3. Kde?
Ešte som zabudol, niekto nevie po anglicky (ja tiež neviem) a nedokáže to možno pochopiť s tej anglickej verzie. Verím tomu že taký človek privíta takúto preloženú a trochu vysvetlenú verziu. A tu sa ma môže kludne opýtať, kde robí chybu ak mu to nepôjde. Kdežto na tej anglickej asi nie.
v Opere 7.5 mi tooltipy nezmizi, ale pouze se useknout
btw: tento formular se v tom samem prohlizeci spatne zobrazi (nekoresponduji popisky s poli)
no abbr by sa malo pouzit vyhradne na skratky.. CSS, XHTML, SEO, atd.
Re: wik Formulár si nepamätá len URL a to z dôvodu že som to zrušil, lebo v PHP scripte nieje ošetrené to, keď niekto nedá adresu aj z HTTP. Kedže sa PHP-čku nerozumiem tak som to riešil takto. Meno a e-mail by si malo pamätať.
Aspoň mne to ide.
abbr na stránke tuším nemám nikde všade je použité acronym. Uznávam, že niekde to možno nieje použité správne a pozriem sa na to.
Re: vaga Na Operu som trochu pri ladení zabudol. Celý formulár som nedávno prerobil a preto sa to rosypalo. Hneď, ako budem mať čas tak sa na to pozriem.
O Opere som písal že to v nej moc nefunguje, ale neviem prečo.
Mne to robí to isté zostane to vysunuté a nezmyzne to.
