In dit artikel wordt de tooltip gedemonstreerd met gewoon JavaScript.
Hoe maak je een eenvoudige JavaScript-tooltip?
Om een tooltip te maken met JavaScript, gebruikt u de ' mouseover ' En ' muis uit 'gebeurtenissen. Volg de onderstaande voorbeelden voor een beter begrip.
Voorbeeld 1: knopinfo met JavaScript
In het gegeven voorbeeld maken we een tooltip in puur JavaScript en maken we de tooltip ook op met de ' stijl ” attribuut.
Maak eerst een tekst waarin we een tooltip willen tonen op de mouseover-gebeurtenis:
< h5 tel = 'tekst' > Linux h5 >
Krijg de tekst waar de tooltip zal verschijnen met behulp van de ' getElementById() ” methode:
waar lh = document. getElementById ( 'tekst' ) ;
Bel nu de ' addEventListener() ' methode door de ' mouseover ”-gebeurtenis en een functie() als parameter. In de gedefinieerde functie zullen we eerst een tooltip maken door een ' div '-element, stelt u de tekst in die bij de muisaanwijzer wordt weergegeven en stelt u wat stijl van de tooltip in met behulp van de ' stijl ” attribuut. Voeg ten slotte de tooltip toe met behulp van de ' toevoegenKind() ” methode:
lh. addEventListener ( 'muis over' , functie ( ) {was tooltip = document. createElement ( 'div' ) ;
knopinfo. binnenHTML = 'Een beste website om vaardigheden te leren' ;
knopinfo. stijl . zichtbaarheid = 'zichtbaar' ;
knopinfo. stijl . positie = 'absoluut' ;
knopinfo. stijl . Achtergrond kleur = 'rgb(107, 101, 101)' ;
knopinfo. stijl . opvulling = '5px' ;
knopinfo. stijl . borderRadius = '3px' ;
knopinfo. stijl . kleur = 'wit' ;
knopinfo. stijl . links = 'vijftig%' ;
knopinfo. stijl . breedte = '200 pixels' ;
document. lichaam . appendKind ( knopinfo ) ;
} ) ;
Gebruik hier de ' muis uit ”gebeurtenis die de tooltip verwijdert terwijl de cursor van de tekst af staat:
lh. addEventListener ( 'muis uit' , functie ( ) {
document. lichaam . kind verwijderen ( knopinfo ) ;
} ) ;
Uitgang
Voorbeeld 2: Tooltip JavaScript gebruiken met CSS
U kunt ook een tooltip maken in JavaScript met CSS.
Om dit te doen, maakt u een gebied om de tekst van de tooltip weer te geven met behulp van de -tag en wijst u een id toe ' #mijnTooltip ”:
< span id = 'mijnTooltip' > span >Verkrijg de referenties van de tekst en de tooltip met behulp van de ' getElementById() ” methode:
waar lh = document. getElementById ( 'tekst' ) ;was tooltip = document. getElementById ( 'mijnTooltip' ) ;
Roep de tooltip op de ' mouseover '-gebeurtenis door de tekst in de functie in te stellen met de knop ' binnenHTML ' eigendom:
lh. addEventListener ( 'muis over' , functie ( ) {knopinfo. stijl . zichtbaarheid = 'zichtbaar' ;
knopinfo. binnenHTML = 'Een beste website om vaardigheden te leren' ;
} ) ;
Verberg de tooltip op de ' muis uit ' evenement door de ' zichtbaarheid eigendom aan “ verborgen ”:
lh. addEventListener ( 'muis uit' , functie ( ) {knopinfo. stijl . zichtbaarheid = 'verborgen' ;
} ) ;
Maak een ID aan “ #mijnTooltip ” in het stijlblad dat de tooltip zal opmaken:
#mijnTooltip {zichtbaarheid : verborgen ;
breedte : 200px ;
Met - inhoudsopgave : 1 ;
achtergrond - kleur : RGB ( 107 , 101 , 101 ) ;
tekst - uitlijnen : centrum ;
kleur : wit ;
opvulling : 5px 0 ;
grens - straal : 3px ;
links : vijftig %;
}
Zoals u kunt zien, is de tooltip met succes geïmplementeerd in de tekst:
Hoe tooltip maken met HTML en CSS?
U kunt ook een tooltip maken zonder JavaScript. Maak in het HTML-bestand de tekst ' Linux ”, waar de knopinfo wordt weergegeven terwijl u erop zweeft. Maak een -element om de tekst voor de tooltip in de kop/tekst -tag in te stellen:
Linux
< span klas = 'knopinfotekst' >
Een platform om vaardigheden te leren
span >
h5 >
Maak in het stijlblad een klasse of een id die aan de HTML-elementen wordt toegewezen. Hier gaan we een klas maken ' knopinfo ” dat is toegewezen aan de kop:
. knopinfo {positie : familielid ;
weergave : in lijn - blok ;
}
Definieer een klasse “ tooltiptekst ” om de tekst van de tooltip op te maken en de HTML toe te wijzen “ ' label:
. tooltiptekst {zichtbaarheid : verborgen ;
breedte : 150px ;
achtergrond - kleur : RGB ( 107 , 101 , 101 ) ;
kleur : #fff ;
tekst - uitlijnen : centrum ;
opvulling : 5px 0 ;
grens - straal : 3px ;
positie : absoluut ;
Met - inhoudsopgave : 1 ;
onderkant : 125 %;
links : vijftig %;
marge - links : - 60px ;
ondoorzichtigheid : 0 ;
overgang : ondoorzichtigheid 0.3s ;
}
Set ' zweven ” effect met de “ knopinfo ” klasse om de tooltip over het zweefeffect weer te geven:
. knopinfo : zweven. tooltiptekst {zichtbaarheid : zichtbaar ;
ondoorzichtigheid : 1 ;
}
Uitgang
We hebben alle benodigde instructies verzameld die relevant zijn voor de gewone JavaScript-tooltip.
Conclusie
Om een tooltip te maken met JavaScript, gebruikt u de ' mouseover ' En ' muis uit 'gebeurtenissen, die de tooltip tonen bij het zweven op het element en deze verbergen wanneer de mouseout-gebeurtenis wordt geactiveerd. Gebruik voor het stylen van de tooltip de ' stijl ” attribuut in JavaScript. In dit artikel hebben we de best mogelijke voorbeelden gedemonstreerd van het maken van een tooltip met gewoon JavaScript, JavaScript met CSS en een tooltip zonder JavaScript.