Den här artikeln visar verktygstipset med vanligt JavaScript.
Hur skapar jag ett vanligt JavaScript-verktygstips?
För att skapa ett verktygstips med JavaScript, använd ' för muspekaren ' och ' musen ut ' evenemang. Följ nedanstående exempel för en bättre förståelse.
Exempel 1: Verktygstips med JavaScript
I det givna exemplet kommer vi att skapa ett verktygstips i ren JavaScript och även utforma verktygstipset med hjälp av ' stil ' attribut.
Skapa först en text där vi vill visa ett verktygstips om mouseover-händelsen:
< h5 id = 'text' > Linux h5 >
Hämta texten där verktygstipset kommer att visas med hjälp av ' getElementById() ' metod:
var lh = dokumentera. getElementById ( 'text' ) ;
Ring nu ' addEventListener() '-metoden genom att skicka ' för muspekaren ” händelse och en funktion() som en parameter. I den definierade funktionen kommer vi först att skapa ett verktygstips genom att skapa en ' div ”-elementet, ställ in texten som ska visas på pekaren och ställ in lite stil på verktygstipset med hjälp av ” stil ' attribut. Lägg slutligen till verktygstipset med hjälp av ' appendChild() ' metod:
lh. addEventListener ( 'musen över' , funktion ( ) {var verktygstips = dokumentera. skapaElement ( 'div' ) ;
verktygstips. innerHTML = 'En bästa webbplats för att lära sig färdigheter' ;
verktygstips. stil . synlighet = 'synlig' ;
verktygstips. stil . placera = 'absolut' ;
verktygstips. stil . bakgrundsfärg = 'rgb(107, 101, 101)' ;
verktygstips. stil . stoppning = '5px' ;
verktygstips. stil . borderRadius = '3px' ;
verktygstips. stil . Färg = 'vit' ;
verktygstips. stil . vänster = 'femtio%' ;
verktygstips. stil . bredd = '200px' ;
dokumentera. kropp . appendChild ( verktygstips ) ;
} ) ;
Här använder du ' musen ut ” händelse som tar bort verktygstipset medan markören kommer bort från texten:
lh. addEventListener ( 'mouseout' , funktion ( ) {
dokumentera. kropp . ta bort Barn ( verktygstips ) ;
} ) ;
Produktion
Exempel 2: Verktygstips med JavaScript med CSS
Du kan också skapa ett verktygstips i JavaScript med CSS.
För att göra det, skapa ett område för att visa texten i verktygstipset med taggen och tilldela ett id ' #mitt verktygstips ”:
< span id = 'mitt verktygstips' > spänna >Få referenserna till texten och verktygstipset med hjälp av ' getElementById() ' metod:
var lh = dokumentera. getElementById ( 'text' ) ;var verktygstips = dokumentera. getElementById ( 'mitt verktygstips' ) ;
Ring verktygstipset på ' för muspekaren ' händelse genom att ställa in texten i funktionen med hjälp av ' innerHTML ' fast egendom:
lh. addEventListener ( 'musen över' , funktion ( ) {verktygstips. stil . synlighet = 'synlig' ;
verktygstips. innerHTML = 'En bästa webbplats för att lära sig färdigheter' ;
} ) ;
Göm verktygstipset på ' musen ut händelse genom att ställa in synlighet ' egendom till ' dold ”:
lh. addEventListener ( 'mouseout' , funktion ( ) {verktygstips. stil . synlighet = 'dold' ;
} ) ;
Skapa ett id ' #mitt verktygstips ' i formatmallen som kommer att utforma verktygstipset:
#mitt verktygstips {synlighet : dold ;
bredd : 200 pixlar ;
Med - index : 1 ;
bakgrund - Färg : rgb ( 107 , 101 , 101 ) ;
text - justera : Centrum ;
Färg : vit ;
stoppning : 5 px 0 ;
gräns - radie : 3 px ;
vänster : femtio %;
}
Som du kan se att verktygstipset har implementerats på texten:
Hur skapar man verktygstips med HTML och CSS?
Du kan också skapa ett verktygstips utan JavaScript. I HTML-filen skapar du texten ' Linux ”, där verktygstipset kommer att visas när du håller muspekaren över det. Skapa -element för att ställa in texten för verktygstipset i taggen rubrik/text :
Linux
< spänna klass = 'verktygstipstext' >
En plattform för att lära sig färdigheter
spänna >
h5 >
Skapa en klass eller ett id i stilmallen som kommer att tilldelas HTML-elementen. Här kommer vi att skapa en klass ' verktygstips ” som är tilldelad rubriken:
. verktygstips {placera : relativ ;
visa : i kö - blockera ;
}
Definiera en klass ' verktygstipstext ' för att utforma texten i verktygstipset och tilldela den HTML-koden ' ' tag:
. verktygstipstext {synlighet : dold ;
bredd : 150 pixlar ;
bakgrund - Färg : rgb ( 107 , 101 , 101 ) ;
Färg : #fff ;
text - justera : Centrum ;
stoppning : 5 px 0 ;
gräns - radie : 3 px ;
placera : absolut ;
Med - index : 1 ;
botten : 125 %;
vänster : femtio %;
marginal - vänster : - 60px ;
opacitet : 0 ;
övergång : opacitet 0,3s ;
}
Uppsättning ' sväva ' effekt med ' verktygstips ”-klass för att visa verktygstipset om hovringseffekten:
. verktygstips : sväva. verktygstipstext {synlighet : synlig ;
opacitet : 1 ;
}
Produktion
Vi har sammanställt alla nödvändiga instruktioner som är relevanta för det enkla JavaScript-verktygstipset.
Slutsats
För att skapa ett verktygstips med JavaScript, använd ' för muspekaren ' och ' musen ut ”-händelser, som visar verktygstipset vid hovring över elementet och döljer det när mouseout-händelsen utlöses. För styling av verktygstipset, använd ' stil ”-attribut i JavaScript. I den här artikeln visade vi de bästa möjliga exemplen på att skapa ett verktygstips med vanligt JavaScript, JavaScript med CSS och ett verktygstips utan JavaScript.