40+ Przydatne podpowiedzi Skrypty z CSS, JavaScript i jQuery
Ciekawy element interfejsu użytkownika, podpowiedzi (zwane także infotips), sprawiają, że małe okienko pojawia się, gdy kursor myszy znajduje się nad określonym tekstem lub obrazem z informacjami w odniesieniu do elementu zawieszonego nad. Pod względem doświadczenia użytkownika podpowiedzi zapewniają użytkownikom najszybsze i najłatwiejsze źródło informacji bez konieczności klikania czegokolwiek.
Chociaż najprostszym sposobem dodania podpowiedzi do tekstu jest użycie znacznika HTML lub TYTUŁ =””, ALT =””. Są jednak naprawdę fajne podpowiedzi projekty i style, które można tworzyć za pomocą JavaScript i CSS za pomocą skryptów podpowiedzi. Spójrzmy.
CSS
Balloon.css - Balon to biblioteka CSS skomponowany z SasS i LESS aby wyświetlić interaktywną podpowiedź. Zawartość i pozycja podpowiedzi można konfigurować za pomocą dane- atrybut. Możesz wyświetlić podpowiedź po lewej, prawej lub lewej stronie prawej. Możesz nawet dodaj emotikony do treści. Balloon.css można zainstalować za pośrednictwem NPM lub załadować z CDNJS.
Simptip - Wykonane z SasS umożliwiającym przekonfiguruj i ponownie skompiluj kod, aby dopasować go do swoich wymagań. Położenie podpowiedzi i zawartość można konfigurować za pomocą nazwy klasy i dane-podpowiedź atrybut. Simptip jest dostępny jako Pakiet NPM, przędza i altana.
Hint.css - Jedna z popularnych bibliotek CSS do wyświetlania podpowiedzi, Hint.css jest używana przez wiele popularnych stron internetowych, takich jak Fiverr, Webflow i Tridiv. W przeciwieństwie do pozostałych dwóch bibliotek CSS, Hint.css używa etykieta aria Możesz skonfigurować rozmiar i kolor za pomocą nazw klas przy użyciu metodologii BEM. Hint.css jest dostępny w NPM, Bower i CDNJS.
Microtip - Kolejna niesamowita biblioteka CSS do tworzenia podpowiedzi “Dostępność” w myślach, Microtip używa etykieta aria trzymać zawartość podpowiedzi i dane- atrybut, aby skonfigurować rozmiar i pozycję podpowiedzi.
Wykorzystuje zmienną CSS, która umożliwia dostosowanie podpowiedzi za pomocą zwykłego pliku CSS. Zmienne CSS są już obsługiwane w wielu przeglądarkach internetowych i mobilnych. Microtip jest dostępny jako pakiet NPM, Yarn i UNPkg CDN.
Wenk - To tylko 733 bajty. Super lekka biblioteka napisane w supernowoczesnym CSS przy użyciu CSSNext, LESS i SCSS dzięki czemu można dostosować i zrekompilować style tak, jak lubisz. Wenk można pobrać z NPM, Yarn i następujących bezpłatnych usług CDN: rawgit.com i unpkg.com.
Tooltippy - Inne lekka biblioteka CSS ma tylko około 1 KB rozmiaru. Tooltippy zawiera kilka gotowych motywów do stylizacji podpowiedzi. Jest napisany z preprocesorami CSS o nazwie Stylus. Zobacz instrukcję, jak możesz rozszerz lub dostosuj te motywy.
ElegantTips - Ta biblioteka zawiera kilka gotowe motywy które można zmienić za pomocą podanych nazw klas. W przeciwieństwie do innych bibliotek, które opierają się na HTML5 dane- albo etykieta aria atrybut, ElegantTips wymaga dodania dodatkowego elementu w celu utworzenia podpowiedzi. To pozwala dodaj dosłownie każdą treść do podpowiedzi poza prostym tekstem.
Tootik - Nie tylko ta biblioteka CSS zapewnia arkusz stylów w formacie CSS, LESS i SasS, ale także zapewnia łatwy w użyciu GUI do dostosowania podpowiedzi. Możesz po prostu skopiować i wkleić HTML wygenerowany przez to narzędzie. To takie proste.
VanillaJS
TippyJS - Napędzany przez Popper.js, TippyJS jest wyposażony w mnóstwo opcji do konfiguracji podpowiedzi. Możemy dostosować animacje, strzałkę podpowiedzi, szerokość, rozmiar, motyw i wiele więcej. Zapewnia także funkcje oddzwaniania, za pomocą których możesz wykonać funkcję, gdy podpowiedź jest pokazana i ukryta. Te funkcje sprawiają, że TippyJS jest jedną z naszych potężnych bibliotek JavaScript na naszej liście do tworzenia podpowiedzi.
Darsain Tooltip - Ta biblioteka zapewnia podstawową implementację podpowiedzi. Mimo to zapewnia rozbudowane opcje konfigurowania zachowania tootip oraz a zestaw nazw klas, aby zmienić wygląd podpowiedzi. Podpowiedź działa dobrze w starszych przeglądarkach, takich jak IE9 i, w razie potrzeby, IE8 z kilkoma zmianami.
Bubb - Bubb może być odpowiedni dla zaawansowanych użytkowników JavaScript. Korzystanie z niego rozbudowane interfejsy API, oprócz wyświetlania prostego tekstu, możesz programowo dodać bardziej złożoną treść HTML do podpowiedzi. Jest całkiem fajnie; możesz odwołać się do przykładów w Dokumentach.
Popper - Zawiera abstrakcję techniczną, aby stworzyć coś, co “wyskakuje”, jak podpowiedź, popover i listy rozwijane. TippyJS używa go jako podstawy biblioteki i jest używany przez wielkie nazwiska w sieci, takie jak Bootstrap, Microsoft i Atlassian.
YY Tooltip - W przeciwieństwie do innych bibliotek, YY Tooltip nie wymaga dodawania elementu HTML lub atrybutów. Działa w pełni z JavaScriptem, a zawartość, pozycja i kolory są zdefiniowane w obiekcie, a nie w elemencie HTML. Idealnie nadaje się do użycia w połączeniu z pełną aplikacją internetową JavaScript.
Position.js - Kolejna doskonała natywna biblioteka JavaScript do tworzenia podpowiedzi, Position.js zapewnia GUI do konfigurowania funkcji i po prostu kopiuje i wkleja wygenerowany kod. Position.js można używać w połączeniu z React.js lub Vue.js.
Podpowiedź Bezet - Ta biblioteka zapewnia 14 opcji, aby wyświetlić podpowiedź; takie jak na dobrze, lewo, Dolny, lewe centrum, prawy koniec, dolny środek, itd. Ponadto jest wystarczająco inteligentny, aby mógł dostosuj pozycję podpowiedzi na podstawie dostępnego miejsca otaczający podpowiedź. Sprawdź demo.
Podkładka pod mysz - Ta biblioteka JavaScrtipt utworzy podpowiedź, która przesunie się wzdłuż pozycji kursora. Etykietka jest skonfigurowana z niestandardowym mousetip- atrybut zamiast używania HTML5 dane- atrybut. Mousetip jest dostępna jako moduł NPM.
Internetipsy - Dość podobny do MousetTip, podpowiedzi generowanej przez tę bibliotekę podąża za pozycją kursora. Wszystko jest konfigurowane za pomocą obiektu JavaScript zamiast HTML i atrybuty są również tworzone dla nowoczesnych przeglądarek. Jest lekki i szybki.
MTip - Biblioteka JavaScript dla podpowiedzi z świetna kompatybilność z przeglądarką. Jest kompatybilny z IE8, w pełni konfigurowalny za pomocą Opcji, i możesz dodać Tooltip do dowolnego elementu nawet na img (element obrazu).
Bubblesee - lekka biblioteka JavaScript, która zapewnia prostą funkcjonalność a “podpowiedź”. Łatwo jest korzystać z biblioteki JavaScript bez skomplikowanych opcji dostosowywania wyników. Plik Sass jest dostępny, jeśli chcesz zmienić wygląd podpowiedzi. Sprawdź demo.
Porady - Zbudowany w nowoczesnej składni JavaScript, ES6, Rozmiar jest tylko 2 KB. Biblioteka udostępnia dwie wersje plików: tipfy.min.js udostępnienie skryptu nowoczesna składnia ES6, i tipfy.es5.min.js jeśli potrzebujesz kompatybilności ze starszymi przeglądarkami. To używa dane- atrybut, aby dostosować etykietkę; dane wskazujące stronę, na przykład służy do ustawienia kierunku podpowiedzi i użycia text-tipfy-text atrybut, aby dodać treść podpowiedzi.
jQuery
Tooltipster - Ta biblioteka zapewnia rozbudowane opcje dostosowywania niemal wszystkiego, na przykład motyw, animacja, obsługa dotyku, treść, wyzwalacz otwierania i zamykania, itp. Udostępnia także niestandardowy detektor zdarzeń i wywołania zwrotne, co pozwala programistom rozszerzyć podpowiedź o funkcje niestandardowe. Ponadto, będąc wtyczką jQuery, podpowiedź działałaby w starszej przeglądarce, takiej jak IE6, w zależności od wersji jQuery używane.
Protip - Kolejna rozbudowana wtyczka jQuery, Protip obsługuje 49 pozycji, HTML dla zawartości podpowiedzi, obsługa ikon, niestandardowe wywołania zwrotne, i dużo więcej. Protip zapewnia GUI pozwalające na łatwe dostosowanie podpowiedzi.
PowerTip - Ta wtyczka jQuery zapewnia także opcje i interfejsy API, które zapewniają programistom wiele różnych sposobów implementacji podpowiedzi. To wspiera nawigacja z klawiatury; wywoływanie wyskakującego okienka podczas nawigacji po elementach za pomocą Patka klawiatura. PowereTip jest dostępny jako moduł NPM. Może być używany z RequireJS i Browserify.
Dostępna podpowiedź Aria - Wtyczka jQuery z wbudowaną funkcją ułatwień dostępu, podpowiedź jest zaprojektowany do wyświetlania okna dialogowego z tytułem, multilinią tekstu i przyciskiem zamykania. Jest jednym z naszych na naszej liście.
TipsJS - Prosta wtyczka jQuery, ale przynosi dość charakterystyczne cechy. The treść podpowiedzi jest ustawiona za pomocą dane-podpowiedź atrybut. Co więcej, możemy również zawijać treść znakami specjalnymi, aby sformatować treść podobną do formatowania Markdown. Możemy użyć * aby pogrubić treść, ~ dla kursywy i ^ do kursu.
Dark Tooltip - Ta biblioteka zawiera kilka naprawdę przydatnych funkcji do włączania podpowiedzi. Na przykład możemy dodać a przycisk potwierdzenia - Tak i Nie, przyciemnij tło podczas wyświetlania podpowiedzi i dodaj elementy HTML do treści. Myślę, że naprawdę powinieneś sprawdzić stronę demonstracyjną.
Aria Tooltip - Kolejna podpowiedź z wbudowaną funkcją dostępności, ta wtyczka jQuery jest zgodna z WAI-ARIA 1.1. Jest responsywny w sposób, który możesz udostępniać różne konfiguracje dla różnych rozmiarów rzutni. Aria Tooltip jest dostępna jako nazwany moduł NPM t-aria-tooltip.
Toolbar.js - Podczas gdy druga wtyczka jQuery może wyświetlać tylko tekst lub treść HTML w podpowiedzi, to Wtyczka jQuery tworzy pasek narzędzi. Etykietka zawiera dwa lub więcej linków z ikoną, która zwykle wykonuje akcję Kliknij, jak każdy pasek narzędzi. Sprawdź dokumentację i przykłady.
VueJS
V-Tooltip - V-Tooltip to komponent Vue.js obsługiwany przez Popper.js pod maską. Zapewnia nowa dyrektywa o nazwie v-tooltip które można dodać do dowolnego elementu, aby utworzyć podpowiedź. The v-tooltip może zawierać treść podpowiedzi lub Opcje. Oprócz zwyczaju v-tooltip dyrektywy, możesz także dodać podpowiedź za pomocą v-popover składnik. Dzięki temu komponentowi możesz dodaj bardziej złożoną treść do podpowiedzi ze składnikiem Vue.js lub HTML.
Vue-Bulma Tooltip - Komponent Vue.js do tworzenia podpowiedzi w oparciu o strukturę interfejsu użytkownika Bulma. Ta biblioteka jest częścią Vue Bulma. Ale komponent podpowiedzi jest dostępny jako nazwany moduł NPM vue-bulma-tooltip że możesz użyć tego jako samodzielnych komponentów.
Vue-Directive-Tooltip - Ogólnie jest podobny do komponentu V-Tooltip opartego na Popper.js i dostarcza tę samą dyrektywę o nazwie v-tooltip. Jednak wydaje się, że nie zapewnia v-popover składnik.
Vue-Tippy - Ta biblioteka opakowuje Tippy.js w komponent Vue.js. Zawiera niestandardową dyrektywę Vue.js o nazwie v-tippy to działa jak atrybut HTML; możemy dodawać treść podpowiedzi lub opcje, aby ją dostosować. To także renderuje niestandardowy komponent Vue.js w treści podpowiedzi za pomocą html opcja.
VueJS-Popover - Niestandardowy plik Vue.js z dyrektywą niestandardową o nazwie v-popover oraz dwa niestandardowe komponenty
Vue-Hint - Wtyczka Vue.js, która otacza Hint.css. Funkcje wtyczki v-hint-css dyrektywy, aby dodać podpowiedź. To przynosi ten sam zestaw opcji co Hint.css, więc możesz dodać je jako obiekt JavaScript lub modyfikator Vue.js..
ReactJS
React Joyride - Komponent React, aby wyświetlić zestaw podpowiedzi prowadzić nowych użytkowników, aby zapoznali się z nową aplikacją.
React Floater - Ta biblioteka opakowuje Popper.js w komponent React o nazwie Floater, więc ma te same wspaniałe funkcje, co Floater. Możesz dodać podpowiedź i wyskakujące okienko, a także możesz baw się z tym komponentem przez tę piaskownicę.
React Autotip - Prosty komponent React z funkcją automatycznego pozycjonowania, działa automatycznie automatycznie dostosuj położenie podpowiedzi kiedy dostępna przestrzeń wokół niego ulegnie zmianie.
React Tippy - Zbudowany na bazie Tippy.js i Popover.js. Ta biblioteka wprowadza Podpowiedź składnik to możesz dołączyć do swojej aplikacji React.
Reaguj podpowiedź - Komponent React rozszerzający Hint.css. Komponenty dodają kilka funkcji, które nie są dostępne w Hint.css, takich jak automatyczna pozycja, opóźnienie i funkcja oddzwaniania.
Więcej
Ember Tooltips - Składnik Ember.js do tworzenia podpowiedzi, jest zbudowany na wierzchu Popper.js. Komponent jest również zaprojektowany z myślą o ułatwieniach dostępu i stale się poprawia, aby zachować zgodność z około 508 w tej kwestii.
D3 Wskazówka - wtyczka D3.js. D3.js to biblioteka JavaScript do wizualizacji danych, takich jak wykresy, mapy, diagramy itp. Ta wtyczka umożliwia wyświetlanie etykietki narzędzi na wierzchu tych danych.
