Czasem przy pracy nad tekstem na naszej stronie www zachodzi potrzeba wyjaśnienia jakiegoś słowa, wyrażenia. W efektowny i w efektywny sposób możemy to wykonać za pomocą tzw. TollTip’a. Tooltip to graficzny element interfejsu użytkownika. Jest on wyświetlany po najechaniu kursorem myszy na element nim opatrzony. Tooltip to przeważnie mała „chmurka” lub „dymek”, który zawiera komentarz albo poszerzenie opisywanego zagadnienia.
Wykonanie tego elementu jest dość proste, a przy tym elegancko wygląda na stronach w sieci.
Słowo, nad których chcemy umieścić 'chmurkę’ umieszczamy w odnośniku:
1 | <a href="index.htm" title="Podpowiedź">Słowo do wyjaśnienia</a> |
A do arkusza CSS wstawiamy następujące instrukcje:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | a { display: inline; position: relative; } a:hover { color: #c00; text-decoration: none; } a:hover:after { background: #lll; background: rgba(0,0,0,.8); border-radius: 5px; bottom: 18px; color: #fff; content: attr(title); display: block; left: 50%; padding: 5px 15px; position: absolute; white-space: nowrap; box-shadow: 0 0 3px #fff; z-index: 98; } a:hover:before { border: solid; border-color: #lll transparent; border-width: 6px 6px 0 6px; bottom: 12px; content:""; display: block; left: 75%; position: absolute; z-index: 99; } |
