Utwórz na stronie dymki z Popper.js

Wszyscy o tym wiedzą podpowiedzi i są dziesiątki darmowych zasobów, które pomogą ci je stworzyć. jednak, niestandardowe bąbelki wiadomości lub “pukawki” są również bardzo przydatne.

one nie są ograniczone do zawisania wydarzeń, dzięki czemu mogą pojawiać się na stronie konsekwentnie i obejść inne zachowania użytkowników.

Jeśli chcesz je utworzyć pukawki do dymek na twojej stronie Popper.js jest najlepszym wyborem. To darmowa wtyczka open-source, hostowana na oficjalnej stronie js.org.

Te wskazówki dotyczące bąbelków znajdziesz w wielu witrynach internetowych, które mają złożone interfejsy. Czasami będą oferować szybkie porady, solucje, i poradę na pokładzie dla osób nowych w interfejsie.

Z Popper.js nie musisz czekać, aż użytkownik zatrzyma się, aby utworzyć podpowiedź. Zamiast tego możesz zmusić poppera do pojawiać się wszędzie, dowolny rozmiar, dowolny kolor, z dynamicznym pozycjonowaniem.

Sprawdź stronę demonstracyjną Popper.js, aby zobaczyć, co mam na myśli. Pochodzi z szeroka gama funkcji pozycjonowania które pozwalają na automatyczne odwrócenie pozycji poppera w oparciu o położenie ekranu.

Gdy użytkownik przewija stronę w dół, może stracić bańkę poppera. Dzięki tej wtyczce możesz zmusić go do ponownego wyświetlenia przez odwrócenie go w górę (lub w dół), w zależności od kierunku przewijania użytkownika.

Masz pełną kontrolę nad granicami, pozycjami strzałek, kolorami podpowiedzi i wiele więcej. Nie wspominając, że ta wtyczka jest wspaniała i w pełni rozszerzalny jeśli chcesz dodać własne funkcje do miksu.

Cały kod źródłowy jest dostępny za darmo na GitHub, jeśli chcesz to sprawdzić.

Aby zacząć, spójrz na strona dokumentacji dla pełnego przewodnika. To powie Ci, które skrypty będziesz potrzebować, jak skonfigurować niestandardowy popper i jak skonfigurować różne opcje rzutni. Chociaż najlepszym źródłem jest główna strona Popper.js, z mnóstwem dem i mnóstwem próbek kodu.

Jeśli chcesz dowiedzieć się więcej o rozwoju, przeczytaj ten wpis na blogu autorstwa twórcy Federico Zivolo.