Hint.css 2.0 - świetny css tooltip

Czym jest Hint.css 2.0 - świetny css tooltip ??

Hint.css 2.0 jest prostym napisanym tylko w CSS3 tooltipem do wykorzystania na każdej stronie www w tym także na stronach opartych o WordPress. Dzięki temu, że jest napisany w css nie musimy wywoływać dodatkowych zapytań, ładować dodatkowych skryptów java. Dodajemy tylko prosty kod CSS i cieszymy się nową funkcjonalnością strony.

Bibliotekę pobierzemy ze strony: http://kushagragour.in/lab/hint/

Podstawowe zalety Hint.css 2.0:

• Tylko CSS. Żadnego JavaScript!
• Bardzo mały rozmiar. Jedynie 1.5KB minified oraz gzipped!
• Prosty do użycia. Nie potrzeba żadnych wtyczek i konfiguracji.
• Działa z wszystkimi nowymi przeglądarkami.

Instalacja na stronie.

Instalacja Hint.css 2.0 jest bajecznie prosta i możemy ją rozwiązać na dwa sposoby. Pierwszy z nich to dodanie odpowiedniego kodu do naszej strony w znacznikach meta:

<link rel="stylesheet" href="hint.css"></link>

lub:

<link rel="stylesheet" href="hint.min.css"></link>

Drugim sposobem dla nas dużo lepszym jest dodanie kodu z biblioteki do pliku style.css motywu potomnego. To oczywiście sposób dla WordPress. Ściągamy plik z poniższej strony i jego zawartość dodajemy do pliku style.css w naszym motywie potomnym (Child Theme).

Pełna instalacja

[unminified] : https://raw.github.com/chinchang/hint.css/master/hint.css
[minified] : https://raw.github.com/chinchang/hint.css/master/hint.min.css

Podstawowa instalacja nie posiada kolorów i efektów

[unminified] : https://raw.github.com/chinchang/hint.css/master/hint.base.css
[minified] : https://raw.github.com/chinchang/hint.css/master/hint.base.min.css

Możemy też skorzystać z dwóch dostępnych CDN-ów i załadować bibliotekę bezpośrednio z nich:

http://www.jsdelivr.com/#!hint.css
https://cdnjs.com/libraries/hint.css

Sposoby użycia.

Lista dostępnych styli:

• hint--error
• hint--info
• hint--warning
• hint--success
• hint--always
• hint--rounded
• hint--no-animate
• hint--bounce

I przykład jak wykorzystać bibliotekę:

<span class="hint--bottom" data-hint="To jest nasz CSS tooltip">Najed na mnie</span>

A tak to wygląda w praktyce:

Najedź na mnie

Tutaj przykład przy użyciu kilku klas.

<span class="hint--top hint--rounded hint--bounce" data-hint="To jest nasz CSS tooltip">Najed na mnie</span>

A tak to wygląda w praktyce:

Najedź na mnie

Mamy nadzieję, że biblioteka jak i nasz artykuł przyda się nie jednemu z was.