40+ Handige tooltips Scripts met CSS, JavaScript en jQuery
Een interessant UI-element, tooltips (ook wel infotips genoemd) laten een klein vakje verschijnen als het muiscursor boven een bepaalde tekst of afbeelding met informatie zweeft met betrekking tot het element dat wordt overgeheveld. Gebruikersinterfaces bieden tooltips gebruikers de snelste en gemakkelijkste informatiebron zonder ergens op te hoeven klikken.
Hoewel de eenvoudigste manier om knopinfo aan uw tekst toe te voegen, is om HTML-tags te gebruiken of TITLE =””, ALT =””. Er zijn echter enkele echt cool tooltips ontwerpen en stijlen die u kunt maken met JavaScript en CSS met behulp van tooltips-scripts. Laten we kijken.
CSS
Balloon.css - Ballon is een CSS-bibliotheek gecomponeerd met SasS en LESS om een interactieve tooltip te laten zien. De inhoud en de positie van de tooltip kunnen worden geconfigureerd via de gegevens- attribuut. U kunt de tooltip links, rechts of links-rechts weergeven. Je kan zelfs voeg Emojis toe aan de inhoud. Balloon.css kan via NPM worden geïnstalleerd en of vanaf CDNJS worden geladen.
Simptip - Gemaakt met SasS waardoor herconfigureer en hercompileer de code om aan uw vereisten te voldoen. De positie en inhoud van de tooltip kunnen worden geconfigureerd via de klassenaam en de data-tooltip attribuut. Simptip is beschikbaar als een NPM-, garen- en prikpakket.
Hint.css - Een van de populaire CSS-bibliotheken om knopinfo weer te geven, wordt door veel populaire websites zoals Fiverr, Webflow en Tridiv gebruikt. In tegenstelling tot de andere twee CSS-bibliotheken, Hint.css gebruikt aria-label U kunt de grootte en kleur configureren via de klassenamen gebruikmakend van BEM-methodologie. Hint.css is beschikbaar op NPM, Bower en CDNJS.
microtip - Nog een geweldige CSS-bibliotheek voor het maken van tooltip die is gebouwd met “Toegankelijkheid” in gedachten, Microtip toepassingen aria-label om de inhoud van de tooltip te houden en gegevens- attribuut om de grootte en positie van de tooltip te configureren.
Het maakt gebruik van CSS-variabele waarmee u de tooltip kunt aanpassen met alleen het CSS-bestand. CSS-variabelen worden al in veel web- en mobiele browsers ondersteund. Microtip is beschikbaar als een NPM-, garenpakket en UNPkg-CDN.
Wenk - Het zijn slechts 733 bytes. Een superlichte bibliotheek geschreven in een supermoderne CSS met behulp van CSSNext, LESS en SCSS zo kunt u de stijlen aanpassen en opnieuw compileren zoals u dat wilt. Wenk kan worden gedownload van NPM, Yarn en de volgende gratis CDN-services: rawgit.com en unpkg.com.
Tooltippy - Een ander lichtgewicht CSS-bibliotheek slechts ongeveer 1 kB groot zijn. Tooltippy bevat verschillende vooraf gemaakte thema's voor het stylen van de tooltip. Het is geschreven met een CSS-pre-processor genaamd Stylus. Zie de instructie over hoe je kunt deze thema's uitbreiden of aanpassen.
ElegantTips - Deze bibliotheek wordt geleverd met een paar vooraf gebouwde thema's dat kan worden gewijzigd met de opgegeven klassennamen. In tegenstelling tot de andere bibliotheken die afhankelijk zijn van HTML5 gegevens- of de aria-label attribuut, ElegantTips vereist een extra element toegevoegd om de tooltip te vormen. Hiermee kunt u voeg letterlijk elke inhoud toe aan de tooltip naast eenvoudige tekst.
Tootik - Niet alleen dat deze CSS-bibliotheek de stylsheet in CSS-, LESS- en SasS-indeling levert, maar ook een eenvoudig te gebruiken GUI om de tooltip aan te passen. U kunt eenvoudig de HTML kopiëren en kopiëren die door deze tool is gegenereerd. Het is zo simpel.
VanillaJS
TippyJS - Powered by Popper.js, TippyJS wordt geleverd met een overvloed aan opties om de tooltip te configureren. We kunnen de animaties, de tooltip-pijl, de breedte, de grootte, het thema en nog veel meer aanpassen. Het biedt ook callback-functies waarmee u kunt voer een functie uit wanneer de tooltip wordt getoond en verborgen. Deze functies maken TippyJS tot een van onze krachtige JavaScript-bibliotheken in onze lijst om tooltip te maken.
Darsain Tooltip - Deze bibliotheek biedt de basisimplementatie van een tooltip. Toch biedt het uitgebreide opties om het tootoopgedrag te configureren, en een set klassenamen om het uiterlijk van de tooltip te wijzigen. De tooltip werkt goed in oudere browsers zoals IE9 en, indien nodig, IE8 met een paar aanpassingen.
Bubb - Bubb is misschien goed geschikt voor geavanceerde JavaScript-gebruikers. Het gebruiken van zijn uitgebreide API's, afgezien van het weergeven van eenvoudige tekst, u kunt programmatisch een complexere HTML-inhoud toevoegen aan de tooltip. Het is best cool; u kunt verwijzen naar de Docs de voorbeelden.
drukknoop - Bevat een technische abstractie om iets te creëren “pops”, zoals een tooltip, een popover en drop-downs. TippyJS gebruikt het als de stichting van de bibliotheek en wordt gebruikt door grote namen op het web, zoals Bootstrap, Microsoft en Atlassian.
YY-knopinfo - In tegenstelling tot de andere bibliotheken, YY Tooltip vereist niet dat u een HTML-element of -kenmerken toevoegt. Het werkt volledig met JavaScript en de inhoud, positie en kleuren worden in een object gedefinieerd in plaats van in een HTML-element. Het is perfect om te gebruiken in combinatie met een volledige JavaScript-webapplicatie.
Position.js - Nog een uitstekende native JavaScript-bibliotheek om tooltips, Position.js, te maken biedt een GUI om de functie te configureren en eenvoudig de gegenereerde code te kopiëren en te plakken. Positie.js kan worden gebruikt in combinatie met React.js of Vue.js.
Bezet Tooltip - Deze bibliotheek biedt 14 opties om de tooltip weer te geven; zoals op de rechts, links, bodem, links-center, rechts-end, middenonder, etc. Bovendien is het ook slim genoeg dat het zou kunnen pas de positie van de knop aan op basis van de beschikbare ruimte rondom de tooltip. Bekijk de demo.
MouseTip - Deze JavaScrtipt-bibliotheek maakt een tooltip die langs de cursorpositie beweegt. De tooltip is geconfigureerd met een niet-standaard MouseTip- attribuut in plaats van de HTML5 te gebruiken gegevens- attribuut. Mousetip is beschikbaar als een NPM-module.
Internetips - Vrij gelijkaardig aan MousetTip, de tooltip gegenereerd door deze bibliotheek volgt de cursorpositie. Alles wordt geconfigureerd via het JavaScript-object in plaats van HTML en de attributen zijn ook gebouwd voor moderne browsers. Het is lichtgewicht en snel.
MTip - Een JavaScript-bibliotheek voor Tooltip met geweldige browsercompatibiliteit. Het is compatibel met IE8, volledig aanpasbaar via de opties, en u kunt de knopinfo toevoegen aan elk element, zelfs op een img (een afbeeldingselement).
Bubblesee - een lichtgewicht JavaScript-bibliotheek die een eenvoudige functionaliteit van een biedt “tooltip”. Het is gemakkelijk om JavaScript-bibliotheken te gebruiken zonder ingewikkelde opties om de uitvoer aan te passen. Een Sass-bestand wordt verstrekt als u het uiterlijk van de tooltip wilt wijzigen. Bekijk de demo.
Tipfy - Gebouwd met de moderne JavaScript-syntaxis, ES6, Tipfy is slechts 2 kB groot. De bibliotheek biedt twee versies van bestanden: tipfy.min.js het script voorzien van moderne ES6-syntaxis, en tipfy.es5.min.js als je compatibiliteit met oudere browsers nodig hebt. Het gebruikt gegevens- attribuut om de tooltip aan te passen; de data-tipfy-side, wordt bijvoorbeeld gebruikt om de richting van de tooltip in te stellen en te gebruiken data-tipfy-text attribuut om de tooltip-inhoud toe te voegen.
jQuery
Tooltipster - Deze bibliotheek biedt uitgebreide opties om bijna alles aan te passen, zoals de thema, animatie, aanraakondersteuning, inhoud, trigger openen en sluiten, enz. Het biedt ook aangepaste gebeurtenis luisteraars en callbacks waardoor ontwikkelaars de tooltip met aangepaste functies kunnen uitbreiden. Ook als een jQuery-plug-in, is de tooltip zou werken in een oudere browser zoals IE6, afhankelijk van de jQuery-versie gebruikt worden.
Protip - Een andere uitgebreide jQuery-plugin, Protip ondersteunt 49 posities, HTML voor de inhoud van de tooltip, pictogramondersteuning, aangepaste callbacks, en veel meer. Protip biedt een GUI waarmee u de tooltip gemakkelijk kunt aanpassen.
SuperTip - Deze jQuery-plug-in brengt ook opties en API's die ontwikkelaars een aantal verschillende manieren bieden om de tooltips te implementeren. Het ondersteunt toetsenbord navigatie; het pop-upvenster verschijnt tijdens het navigeren met de elementen tab toetsenbord. PowereTip is beschikbaar als een NPM-module. Het kan worden gebruikt met RequireJS en Browserify.
Toegankelijke Aria Tooltip - Een jQuery-plug-in met Toegankelijkheidsfunctie ingebouwd, de tooltip is ontworpen om een dialoogvenster weer te geven met een titel, meerdere regels tekst en een knop Sluiten. Het is een van zijn eigen op onze lijst.
TipsJS - Een eenvoudige plug-in voor jQuery, maar het brengt behoorlijk onderscheidende functies. De inhoud van de tooltip is ingesteld met a data-tooltip attribuut. Wat meer is, is dat we de inhoud ook kunnen verpakken met speciale tekens om de inhoud op te stellen vergelijkbaar met Markdown-opmaak. We kunnen gebruiken * om de inhoud vetgedrukt te maken, ~ voor cursief en ^ voor rubriek.
Dark Tooltip - Deze bibliotheek biedt enkele echt handige functies om de tooltip aan te zetten. We kunnen bijvoorbeeld een toevoegen knop bevestigen - Ja en Nee, dim de achtergrond terwijl de knopinfo wordt weergegeven en voeg HTML-elementen toe naar de inhoud. Ik denk dat je echt de demo-pagina moet bekijken.
Aria Tooltip - Een andere tooltip met ingebouwde toegankelijkheidsfunctie, deze jQuery-plugin voldoet aan WAI-ARIA 1.1. Het is responsief op een manier die je kunt verschillende configuraties bieden voor verschillende viewportgroottes. Aria Tooltip is beschikbaar als een NPM-module met de naam t-aria-tooltip.
Toolbar.js - Hoewel de andere jQuery-invoegtoepassing alleen eenvoudige tekst- of HTML-inhoud binnen een tooltip kan weergeven, is dit het volgende jQuery-plug-in maakt een werkbalk. De knopinfo bevat twee of meer koppelingen met een pictogram waarop normaal gesproken een actie wordt uitgevoerd Klik, zoals elke werkbalk. Bekijk de documentatie en voorbeelden.
VueJS
V-Tooltip - V-Tooltip is een Vue.js component aangedreven door Popper.js onder de motorkap. Het biedt een nieuwe richtlijn genoemd v-tooltip die aan elk element kan worden toegevoegd om een tooltip te maken. De v-tooltip kan de tooltip-inhoud of de opties bevatten. Afgezien van de gewoonte v-tooltip richtlijn, kunt u ook de tooltip toevoegen met de v-popover component. Met dit onderdeel kunt u voeg meer complexe inhoud toe aan de tooltip met Vue.js component of HTML.
Vue-Bulma Tooltip - Een Vue.js-component om tooltip te maken op basis van het Bulma UI Framework. Deze bibliotheek maakt deel uit van Vue Bulma. Maar de tooltip-component is beschikbaar als een NPM-module met de naam vue-bulma-tooltip dat je dit als zelfstandige componenten kunt gebruiken.
Vue-richtlijn-Tooltip - Over het algemeen is het vergelijkbaar met V-Tooltip component op basis van Popper.js en biedt dezelfde genoemde richtlijn v-tooltip. Het lijkt echter niet het v-popover bestanddeel.
Vue-Tippy - Deze bibliotheek verpakt Tippy.js in een component Vue.js. Het bevat een aangepaste Vue.js-instructie genaamd v-tippy dat werkt als een HTML-kenmerk; we kunnen inhoud toevoegen voor tooltip of de opties om het aan te passen. Het maakt ook een aangepaste component Vue.js op de inhoud van de tooltip met behulp van de html keuze.
VueJS-Popover - Een aangepaste Vue.js met een aangepaste instructie genaamd v-popover en twee aangepaste componenten namelijk
Vue-Hint - Een Vue.js-plug-in die Hint.css omhult. De plugin-functies v-hint-css richtlijn om de tooltip toe te voegen. Het brengt dezelfde set opties als Hint.css, dus je kunt ze toevoegen als een JavaScript-object of Vue.js-modifier.
ReactJS
Reageer op Joyride - Een component React om een reeks tooltips weer te geven die dat wel doen leid nieuwe gebruikers om vertrouwd te raken met uw nieuwe applicatie.
Reageer Floater - Deze bibliotheek wikkelt Popper.js in een React-component met de naam Floater, dus het heeft dezelfde geweldige functies als Floater's. Je kunt tooltip en popup toevoegen, en dat kan ook speel rond met deze component door deze zandbak.
Reacteer Autotip - Een eenvoudig React-onderdeel met de functie voor automatisch positioneren, zodat Autotip dat wel doet past automatisch de positie van de tooltip aan wanneer de beschikbare ruimte eromheen verandert.
Reageer Tippy - Gebouwd bovenop Tippy.js en Popover.js. Deze bibliotheek introduceert een tooltip component dat u kunt opnemen in uw React-toepassing.
Reageer Hint - Een component die Hint.css verlengt. De componenten voegen enkele functies toe die niet beschikbaar zijn in Hint.css zoals automatische positie, vertraging en een terugbelfunctie.
Meer
Ember Tooltips - Een component van Ember.js voor het maken van tooltips, het is bovenop Popper.js gebouwd. Het onderdeel is ook ontworpen met Toegankelijkheid in het achterhoofd en blijft verbeteren om te voldoen aan ongeveer 508 voldoening over deze kwestie.
D3 Tip - een D3.js-plug-in. D3.js is een JavaScript-bibliotheek voor gegevensvisualisatie zoals diagrammen, kaarten, diagrammen, enz. Met deze plug-in kunt u knopinfo bovenaan deze gegevens weergeven.
