Zaznacz stronę

Jeżeli potrzebujesz nowoczesnego i łatwego w implementacji tooltipa – to chyba mam coś dla Ciebie.

http://iamceege.github.io/tooltipster/ Absolutnie rewelacyjne rozwiązanie, działające na wszystkich przeglądarkach, również tych z interfejsem dotykowym.

Wystarczy kilka kroków, żeby go uaktywnić:

1. Zassanie skryptu i styli css
W nagłóku strony umieszczamy odpowiednie linki do uprzednio zassanych plików

1
2
3
4
5
6
7
8
9
10
<head>
...

    <link rel="stylesheet" type="text/css" href="css/tooltipster.css" />

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.0.min.js"></script>
    <script type="text/javascript" src="js/jquery.tooltipster.min.js"></script>

...
</head>

2. W tej samej sekcji co powyżej (ale po wczytaniu powyższych) aktywujemy plugin – definiując jaka klasa elementu na go uruchamiać

1
2
3
4
5
6
7
8
9
10
<head>

    ...

    <script>
        $(document).ready(function() {
            $('.tooltip').tooltipster();
        });
    </script>
</head>

w tym wypadku będzie to klasa: „tooltip”

3. Teraz już można swobodnie do niemal każdego elementu na stronie dodawać te klasę, i parametr „title” którego zawartość będzie się wyświetlać w chmurce:

Zdjęcie:

1
<img src="image.png" class="tooltip" title="A to będzie w chmurce" />

Link:

1
<a href="http://www.strzelbicki.pl" class="link tooltip" title="A to będzie w chmurce">Link</a>

A może potrzebujesz tooltipa do diva?

1
2
3
<div class="tooltip" title="A to będzie w chmurce">
    <p>To jest div z tooltipem</p>
</div>

Wygląd chmurki można oczywiście manualnie zmienić (tooltipster.css), ale autor skryptu daje 4 różne gotowe skórki.
Jest też cała bateria opcji, przesunięcie chmurki, szybkość pojawiania itp itd – naprawdę dobra robota!
Jak się pojawią jakieś pytania – chętnie pomogę.