40+ Užitečné tipy Skripty s CSS, JavaScript a jQuery
Zajímavý prvek uživatelského rozhraní, popisky nástrojů (také nazývané infotips) vytvářejí malý rámeček, když se objeví kurzor myši je umístěn nad určitým textem nebo obrázkem s informacemi pokud jde o prvek vznášející se nad ním. Pokud jde o zkušenosti uživatelů, popisky poskytují uživatelům nejrychlejší a nejjednodušší zdroj informací bez nutnosti kliknout.
Nejjednodušší způsob, jak přidat popisky do textu, je použití značky HTML nebo TITLE =””, ALT =””. Nicméně, tam jsou některé opravdu cool návrhy nástrojů a styly, které můžete vytvořit pomocí JavaScriptu a CSS pomocí skriptů popisků. Podívejme se na to.
CSS
Balloon.css - Balón je CSS knihovna složený ze SasS a LESS zobrazit interaktivní popis. Obsah a umístění nápovědy jsou konfigurovatelné pomocí data- atribut. Můžete zobrazit nápovědu vlevo, vpravo nebo vlevo-vpravo. Můžete dokonce přidejte Emojis do obsahu. Balloon.css lze instalovat přes NPM a nebo jej načíst z CDNJS.
Simptip - Vyrobeno s SasS umožňující překonfigurujte a znovu zkompilujte kód tak, aby vyhovoval vašim požadavkům. Pozice a obsah nápovědy je konfigurovatelný pomocí názvu třídy a data-tooltip atribut. Simptip je k dispozici jako NPM, příze a Bower balíček.
Tip.css - Jeden z populárních CSS knihoven pro zobrazení tooltipu, Hint.css je používán mnoha populárními webovými stránkami jako Fiverr, Webflow a Tridiv. Na rozdíl od ostatních dvou knihoven CSS, Hint.css používá Aria-label Velikost a barvu můžete konfigurovat pomocí názvů tříd metodiky BEM. Hint.css je k dispozici na NPM, Bower a CDNJS.
Mikrotip - Další úžasná CSS knihovna pro vytváření tooltip postavený s “Přístupnost” v mysli, Microtip použití Aria-label držet obsah nápovědy a data- atribut konfigurovat velikost a umístění popisku.
Používá CSS proměnnou, která vám umožní přizpůsobit tooltip s prostým ol 'CSS souboru. Proměnné CSS jsou již podporovány v mnoha webových a mobilních prohlížečích. Mikrotip je k dispozici jako NPM, balíček příze a UNPkg CDN.
Wenku - Je to jen 733 bytů. Super lehká knihovna napsaný v super-moderním CSS pomocí CSSNext, LESS a SCSS tak můžete přizpůsobit a znovu zkompilovat styly tak, jak se vám líbí. Wenk si můžete stáhnout z NPM, příze a následujících bezplatných služeb CDN: rawgit.com a unpkg.com.
Tooltippy - Další lehká knihovna CSS velikosti přibližně 1 KB. Tooltippy obsahuje několik předem připravených témat pro styling tooltipu. Je napsán s předprocesory CSS s názvem Stylus. Viz návod, jak můžete rozšířit nebo přizpůsobit tato témata.
ElegantTips - Tato knihovna přichází s několika předem připravená témata které lze změnit s poskytnutými názvy tříd. Na rozdíl od ostatních knihoven, které spoléhají na HTML5 data- nebo Aria-label atribut ElegantTips vyžaduje další prvek přidaný k vytvoření popisku. To vám umožní přidat doslovně jakýkoli obsah do popisku nad rámec jednoduchého textu.
Tootik - Nejen, že tato knihovna CSS poskytuje stylsheet ve formátu CSS, LESS a SasS, ale také poskytuje snadno použitelné grafické uživatelské rozhraní pro přizpůsobení nápovědy. HTML generované tímto nástrojem můžete jednoduše zkopírovat a vložit. Je to tak jednoduché.
VanillaJS
TippyJS - Powered by Popper.js, TippyJS přichází s množství možností konfigurace popisku. Můžeme přizpůsobit animace, tooltip šipku, šířku, velikost, téma, a mnohem více. Poskytuje také funkce zpětného volání, kterými můžete vykonat funkci, když se zobrazí a skryje popis nástroje. Díky těmto funkcím je TippyJS jednou z našich silných knihoven JavaScript na našem seznamu k vytváření nápovědy.
Darsain Tooltip - Tato knihovna poskytuje základní implementaci tooltipu. Přesto poskytuje rozsáhlé možnosti konfigurace chování tootipu a sada názvů tříd pro změnu vzhledu nápovědy. Tooltip funguje dobře ve starším prohlížeči, jako je IE9, a v případě potřeby IE8 s několika úpravami.
Bubb - Bubb může být vhodný pro pokročilé uživatele JavaScriptu. Použití jeho rozsáhlé API, kromě zobrazení jednoduchého textu, do popisku můžete programově přidat složitější obsah HTML. To je parádní; můžete se podívat na příklady Dokumentů.
Popper - Obsahuje technickou abstrakci k vytvoření něco, co “pop”, jako tooltip, popover a drop-downs. TippyJS ji používá jako základ knihovny a používá ji velká jména na webu, jako jsou Bootstrap, Microsoft a Atlassian.
YY Tooltip - Na rozdíl od ostatních knihoven, YY Tooltip nevyžaduje přidání elementu HTML nebo atributů. Funguje plně s JavaScriptem a obsah, pozice a barvy jsou definovány v objektu namísto v elementu HTML. Je ideální pro použití ve spojení s plnou webovou aplikací JavaScriptu.
Position.js - Další vynikající nativní JavaScript knihovna vytvořit tooltips, Position.js poskytuje GUI pro konfiguraci funkce a jednoduše zkopírovat a vložit kód tam vygenerovaný. Position.js lze použít ve spojení s React.js nebo Vue.js.
Bezet Tooltip - Tato knihovna poskytuje 14 možností zobrazení nápovědy; jako např že jo, vlevo, odjet, dno, levý střed, pravý konec, centrum, atd. Kromě toho, že je také dost chytrý, že to mohlo upravte pozici popisku na základě volného místa v okolí popisku. Podívejte se na demo.
MouseTip - Tato knihovna JavaScrtipt vytvoří a tooltip, který se bude pohybovat podél pozice kurzoru. Tooltip je konfigurován s nestandardním mousetip- namísto použití HTML5 data- atribut. Mousetip je k dispozici jako modul NPM.
Internet - Poměrně podobný MousetTip, tooltip generovaný touto knihovnou následuje pozici kurzoru. Vše je nakonfigurováno prostřednictvím JavaScriptu namísto HTML a atributy jsou také postaveny pro moderní prohlížeče. Je to lehká a rychlá.
MTip - Knihovna JavaScriptu s popisem velká kompatibilita prohlížeče. Je kompatibilní s IE8, plně přizpůsobitelný pomocí Volby, a můžete přidat popisek k libovolnému prvku i na img (prvek obrázku).
Bubblesee - lehká JavaScript knihovna, která poskytuje jednoduchou funkčnost “popis”. Je snadné používat knihovnu JavaScript bez složitých možností přizpůsobení výstupu. Pokud chcete změnit vzhled nápovědy, je k dispozici soubor Sass. Podívejte se na demo.
Tipfy - Postaven s moderní syntaxí JavaScript, ES6, Tipfy má velikost pouze 2 kB. Knihovna poskytuje dvě verze souborů: tipfy.min.js poskytování skriptu moderní syntaxe ES6, a tipfy.es5.min.js Pokud potřebujete kompatibilitu se staršími prohlížeči. Používá data- atribut přizpůsobit popis; data-tipfy-side, slouží například k nastavení směru a nápovědy nástroje data-tipfy-text atributu pro přidání obsahu popisku.
jQuery
Tooltipster - Tato knihovna poskytuje rozsáhlé možnosti přizpůsobit téměř cokoliv, jako je téma, animace, podpora při dotyku, obsah, spouštěč spouštěný a zavíraný, Poskytuje také vlastní posluchače událostí a zpětná volání, která umožňuje vývojářům rozšířit popis nástrojů o vlastní funkce. Také, být jQuery plugin, tooltip by fungoval ve starším prohlížeči jako IE6 v závislosti na verzi jQuery používány.
Profesionální tip - Další rozsáhlý plugin jQuery, Protip, podporuje 49 pozic, HTML pro obsah nápovědy, podporu ikon, vlastní zpětná volání, a mnohem více. Protip poskytuje GUI umožňující snadné přizpůsobení nápovědy.
PowerTip - Tento plugin jQuery také přináší možnosti a API poskytující vývojářům řadu různých způsobů implementace popisků. Podporuje navigace pomocí klávesnice; zobrazení okna při navigaci s prvky Tab klávesnice. PowereTip je k dispozici jako modul NPM. Lze použít s RequireJS a Browserify.
Přístupná Aria Tooltip - Plugin jQuery s vestavěnou funkcí usnadnění přístupu, tooltip je navržen tak, aby zobrazoval dialogové okno s názvem, víceřádkovým textem a tlačítkem pro zavření. Je to jeden z jeho vlastních na našem seznamu.
TipsJS - Jednoduchý plugin jQuery, který však přináší zcela odlišné vlastnosti. obsah nápovědy je nastaven pomocí a data-tooltip atribut. A co víc, můžeme také zabalit obsah pomocí speciálních znaků, aby se obsah formátoval podobně jako formátování značky Markdown. Můžeme použít * aby byl obsah tučný, ~ pro kurzívu a ^ pro položku.
Tmavý popis - Tato knihovna poskytuje několik užitečných funkcí, které slouží k zapnutí nápovědy. Můžeme například přidat a tlačítko potvrdit - Ano a Ne, ztmavit pozadí, když je zobrazen popis, a přidat prvky HTML obsahu. Myslím, že byste se měli podívat na demo stránku.
Aria Tooltip - Další tooltip s vestavěnou funkcí Accessibility, tento jQuery plugin je kompatibilní s WAI-ARIA 1.1. To je citlivé způsobem, který můžete poskytují různé konfigurace pro různé velikosti výřezů. Aria Tooltip je k dispozici jako modul NPM t-aria-tooltip.
Toolbar.js - Zatímco ostatní jQuery plugin může zobrazit pouze jednoduchý text nebo HTML obsah v rámci tooltipu, to plugin jQuery vytvoří panel nástrojů. Popis bude obsahovat dva nebo více odkazů s ikonou, ve které se obvykle provede akce klikněte, jako každý jiný panel nástrojů. Podívejte se na dokumentaci a příklady.
VueJS
V-tooltip - V-Tooltip je komponenta Vue.js poháněná systémem Popper.js pod kapotou. Poskytuje a nová směrnice v-tooltip který může být přidán k nějakému elementu vytvořit tooltip. v-tooltip obsahovat obsah nápovědy nebo Volby. Kromě zvyku v-tooltip můžete také přidat nápovědu pomocí v-popover součástka. S touto komponentou můžete přidávat do nápovědy složitější obsah s komponentou Vue.js nebo HTML.
Vue-Bulma Tooltip - Komponenta Vue.js pro vytvoření tooltipu založeného na Bulma UI Framework. Tato knihovna je součástí Vue Bulma. Ale komponenta tooltip je k dispozici jako modul NPM vue-bulma-tooltip můžete použít jako samostatné komponenty.
Vue-směrnice-tooltip - Celkově je to podobné komponentě V-Tooltip založené na Popper.js a poskytuje stejnou směrnici nazvanou v-tooltip. Zdá se však, že neposkytuje v-popover součástka.
Vue-Tippy - Tato knihovna zabalí Tippy.js do komponenty Vue.js. Obsahuje vlastní direktivu Vue.js v-tippy který funguje jako atribut HTML; my můžeme přidat obsah pro tooltip nebo možnosti přizpůsobit to. To také činí a pomocí komponenty. \ t html volba.
VueJS-Popover - Vlastní Vue.js s vlastní direktivou nazvanou v-popover a dvě vlastní komponenty
Vue-Hint - Vue.js plugin, který zabalí Hint.css. Funkce pluginu v-hint-css přidávat popis. To přináší stejnou sadu možností jako Hint.css, takže je můžete přidat jako objekt JavaScript nebo modifikátor Vue.js.
ReactJS
Reagovat Joyride - Komponenta React pro zobrazení sady popisků, které budou vést nové uživatele, aby se seznámili s vaší novou aplikací.
Reagovat Floater - Tato knihovna zabalí Popper.js do komponenty React s názvem Floater, takže má stejné skvělé vlastnosti jako Floater's. Můžete přidat tooltip a popup, a můžete také hrát s touto komponentou přes tento pískoviště.
Reagovat Autotip - Jednoduchá složka React s funkcí automatického určování polohy, funkce Autotip automaticky upraví polohu nápovědy když se změní prostor, který je k dispozici.
Reagovat Tippy - Postaven na vrcholu Tippy.js a Popover.js. Tato knihovna zavádí a Popis komponentu můžete zahrnout do aplikace React.
Reagovat nápovědu - A React komponent rozšiřující Hint.css. Komponenty přidávají několik funkcí, které nejsou v Hint.css k dispozici, jako například automatická poloha, zpoždění a funkce zpětného volání.
Více
Popisky nástrojů Ember - Komponenta Ember.js pro vytváření popisků je postavena na vrcholu Popper.js. Komponenta je také navržena s ohledem na přístupnost a neustále se zlepšuje v souladu s přibližně 508 kompatibilitou v této věci.
D3 Tip - plugin D3.js. D3.js je knihovna JavaScriptu pro vizualizaci dat, jako jsou grafy, mapy, diagramy atd. Tento plugin vám umožňuje zobrazit nápovědu v horní části těchto dat.
