Ipapakita ng artikulong ito ang tooltip gamit ang simpleng JavaScript.
Paano Gumawa ng Plain JavaScript Tooltip?
Upang lumikha ng tooltip gamit ang JavaScript, gamitin ang “ mouseover 'at' mouseout ” mga pangyayari. Sundin ang mga halimbawang ibinigay sa ibaba para sa isang mas mahusay na pag-unawa.
Halimbawa 1: Tooltip Paggamit ng JavaScript
Sa ibinigay na halimbawa, gagawa kami ng tooltip sa purong JavaScript at i-istilo rin ang tooltip gamit ang ' istilo ” katangian.
Una, gumawa ng text kung saan gusto naming magpakita ng tooltip sa event ng mouseover:
< h5 id = 'text' > Linux h5 >
Kunin ang text kung saan lalabas ang tooltip gamit ang “ getElementById() 'paraan:
kung saan lh = dokumento. getElementById ( 'text' ) ;
Ngayon, tawagan ang ' addEventListener() 'paraan sa pamamagitan ng pagpasa ng ' mouseover ” kaganapan at isang function() bilang isang parameter. Sa tinukoy na function, una, gagawa tayo ng tooltip sa pamamagitan ng paglikha ng ' div ” element, itakda ang text na ipapakita sa hover, at itakda ang ilang estilo ng tooltip gamit ang “ istilo ” katangian. Panghuli, idagdag ang tooltip gamit ang “ appendChild() 'paraan:
lh. addEventListener ( 'itaas ang mouse' , function ( ) {ay tooltip = dokumento. createElement ( 'div' ) ;
tooltip. panloobHTML = 'Isang pinakamahusay na website upang matuto ng mga kasanayan' ;
tooltip. istilo . visibility = 'nakikita' ;
tooltip. istilo . posisyon = 'ganap' ;
tooltip. istilo . kulay ng background = 'rgb(107, 101, 101)' ;
tooltip. istilo . padding = '5px' ;
tooltip. istilo . hanggananRadius = '3px' ;
tooltip. istilo . kulay = 'puti' ;
tooltip. istilo . umalis = 'limampung%' ;
tooltip. istilo . lapad = '200px' ;
dokumento. katawan . idagdagBata ( tooltip ) ;
} ) ;
Dito, gamitin ang ' mouseout ” kaganapan na mag-aalis ng tooltip habang ang cursor ay lalayo sa text:
lh. addEventListener ( 'mouseout' , function ( ) {
dokumento. katawan . tanggalinBata ( tooltip ) ;
} ) ;
Output
Halimbawa 2: Tooltip Paggamit ng JavaScript Gamit ang CSS
Maaari ka ring gumawa ng tooltip sa JavaScript gamit ang CSS.
Upang gawin ito, lumikha ng isang lugar upang ipakita ang teksto ng tooltip gamit ang tag at magtalaga ng isang id ' #myTooltip ”:
< span id = 'myTooltip' > span >Kunin ang mga sanggunian ng teksto at ang tooltip gamit ang “ getElementById() 'paraan:
kung saan lh = dokumento. getElementById ( 'text' ) ;ay tooltip = dokumento. getElementById ( 'myTooltip' ) ;
Tawagan ang tooltip sa “ mouseover ” kaganapan sa pamamagitan ng pagtatakda ng teksto sa function gamit ang “ innerHTML ” ari-arian:
lh. addEventListener ( 'itaas ang mouse' , function ( ) {tooltip. istilo . visibility = 'nakikita' ;
tooltip. innerHTML = 'Isang pinakamahusay na website upang matuto ng mga kasanayan' ;
} ) ;
Itago ang tooltip sa “ mouseout ' kaganapan sa pamamagitan ng pagtatakda ng ' visibility ” ari-arian sa “ nakatago ”:
lh. addEventListener ( 'mouseout' , function ( ) {tooltip. istilo . visibility = 'nakatago' ;
} ) ;
Lumikha ng isang id ' #myTooltip ” sa style sheet na mag-istilo sa tooltip:
#myTooltip {visibility : nakatago ;
lapad : 200px ;
Sa - index : 1 ;
background - kulay : rgb ( 107 , 101 , 101 ) ;
text - ihanay : gitna ;
kulay : puti ;
padding : 5px 0 ;
hangganan - radius : 3px ;
umalis : limampu %;
}
Tulad ng nakikita mo na ang tooltip ay matagumpay na naipatupad sa teksto:
Paano Gumawa ng Tooltip Gamit ang HTML at CSS?
Maaari ka ring lumikha ng tooltip nang walang JavaScript. Sa HTML file, lumikha ng tekstong ' Linux ”, kung saan ipapakita ang tooltip habang nagho-hover dito. Lumikha ng na elemento upang itakda ang text para sa tooltip sa loob ng heading/text tag:
Linux
< span klase = 'tooltiptext' >
Isang plataporma para matuto ng mga kasanayan
span >
h5 >
Sa style sheet, lumikha ng isang klase o isang id na itatalaga sa mga elemento ng HTML. Dito, gagawa tayo ng klase ' tooltip ” na nakatalaga sa heading:
. tooltip {posisyon : kamag-anak ;
display : nasa linya - harangan ;
}
Tukuyin ang isang klase ' tooltiptext ” para i-style ang text ng tooltip at italaga dito ang HTML “ 'tag:
. tooltiptext {visibility : nakatago ;
lapad : 150px ;
background - kulay : rgb ( 107 , 101 , 101 ) ;
kulay : #fff ;
text - ihanay : gitna ;
padding : 5px 0 ;
hangganan - radius : 3px ;
posisyon : ganap ;
Sa - index : 1 ;
ibaba : 125 %;
umalis : limampu %;
margin - umalis : - 60px ;
opacity : 0 ;
paglipat : opacity 0.3s ;
}
Itakda ' hover 'epekto sa' tooltip ” class upang ipakita ang tooltip sa hover effect:
. tooltip : hover . tooltiptext {visibility : nakikita ;
opacity : 1 ;
}
Output
Binuo namin ang lahat ng kinakailangang tagubiling nauugnay sa simpleng tooltip ng JavaScript.
Konklusyon
Upang lumikha ng tooltip gamit ang JavaScript, gamitin ang “ mouseover 'at' mouseout ” na mga kaganapan, na nagpapakita ng tooltip sa pag-hover sa elemento at itinatago ito kapag na-trigger ang mouseout na kaganapan. Para sa pag-istilo ng tooltip, gamitin ang “ istilo ” attribute sa JavaScript. Sa artikulong ito, ipinakita namin ang pinakamahusay na posibleng mga halimbawa ng paggawa ng tooltip gamit ang simpleng JavaScript, JavaScript na may CSS, at tooltip na walang JavaScript.