[SKRYPT] Intro.js - tooltip jako 'instrukcja krok po kroku'

Intro.js to mały niesamowity skrypt typu "step-by-step", który powinien przydać się głównie na stronach gdzie trzeba coś wyjaśnić, np.:

• instrukcja jak ściągnąć plik
• Instrukcja poruszania się po stronie,
• instrukcja zarejestrowania się, etc.

Uważam, że możliwości tego skryptu są ogromne. Z tej biblioteki korzysta m.in: Amazon, Nestle, SAP + kilka innych mniej znanych (dla mnie).

Do dyspozycji jest 12 różnych przykładów:

1.  Witaj świecie
   http://introjs.com/example/hello-world/index.html

2. Progessbas w instrukcji
   http://introjs.com/example/hello-world/withProgress.html

3. Punkty kliknięć
   http://introjs.com/example/hint/index.html
   Na stronie pojawiają się malutkie punkciki interaktywne. Po kliknięciu na jakiś wyświetla się informacja.

4.  Punkty kliknięć
   http://introjs.com/example/programmatic/hint.html
   Rozszerzona wersja, w której można używać javascript)

5. Włączanie / wyłączanie opcji
   http://introjs.com/example/hello-world/withoutBullets.html

6. Programowy
   http://introjs.com/example/programmatic/index.html
   To samo co 'witaj świecie' tylko można używać JSON.

7. Od prawej do lewej
   http://introjs.com/example/RTL/index.html
   Zmiana kierunku = target = arabia

8. Instrukcja z paginacją
   http://introjs.com/example/multi-page/index.html
   Po wypełnieniu wszystkich kroków przechodzi do następnej strony.

9. HTML w dymku
   http://introjs.com/example/html-tooltip/index.html
   Można korzystać ze wszystkich znaczników HTML.

10. Automatyczne pozycjonowanie
    http://introjs.com/example/auto-position/index.html
    Można określić położenie na stronie do którego biblioteka przeskoczy automatycznie przesuwając stronę (np. na dół)

11. Pływające okienko
    http://introjs.com/example/withoutElement/index.html
    Nie trzeba konkretnie zdefiniować elementu strony, więc może służyć coś na wzór popup.

12. Dostosuj dla swoich potrzeb
    http://introjs.com/example/custom-class/index.html
    Możesz dostosować tooltip dla swoich własnych potrzeb, używając CSS.

Przydatne linki:

• Strona projektu: http://introjs.com/
• GitHub: https://github.com/usablica/intro.js/releases