ఈ కథనం సాదా జావాస్క్రిప్ట్‌ని ఉపయోగించి టూల్‌టిప్‌ను ప్రదర్శిస్తుంది.
సాదా జావాస్క్రిప్ట్ టూల్‌టిప్‌ను ఎలా సృష్టించాలి?
జావాస్క్రిప్ట్‌ని ఉపయోగించి టూల్‌టిప్‌ని సృష్టించడానికి, “ని ఉపయోగించండి mouseover 'మరియు' mouseout ” సంఘటనలు. మెరుగైన అవగాహన కోసం క్రింద ఇవ్వబడిన ఉదాహరణలను అనుసరించండి.
ఉదాహరణ 1: జావాస్క్రిప్ట్ ఉపయోగించి ఉపకరణ చిట్కా
ఇచ్చిన ఉదాహరణలో, మేము స్వచ్ఛమైన జావాస్క్రిప్ట్‌లో టూల్‌టిప్‌ను సృష్టిస్తాము మరియు “ని ఉపయోగించి టూల్‌టిప్‌ను కూడా స్టైల్ చేస్తాము శైలి ' గుణం.
ముందుగా, మౌస్‌ఓవర్ ఈవెంట్‌లో మేము టూల్‌టిప్‌ను చూపించాలనుకుంటున్న టెక్స్ట్‌ను సృష్టించండి:
< h5 id = 'వచనం' > Linux h5 >
“ని ఉపయోగించి టూల్‌టిప్ కనిపించే వచనాన్ని పొందండి getElementById() 'పద్ధతి:
ఎక్కడ lh = పత్రం. getElementById ( 'వచనం' ) ;
ఇప్పుడు, కాల్ చేయండి ' addEventListener() 'ఉత్తీర్ణత ద్వారా' పద్ధతి mouseover ” ఈవెంట్ మరియు ఫంక్షన్()ని పారామీటర్‌గా. నిర్వచించిన ఫంక్షన్‌లో, ముందుగా, ''ని సృష్టించడం ద్వారా మేము టూల్‌టిప్‌ను సృష్టిస్తాము. div ” మూలకం, హోవర్‌లో చూపబడే వచనాన్ని సెట్ చేయండి మరియు “ని ఉపయోగించి టూల్‌టిప్ యొక్క కొంత స్టైలింగ్‌ను సెట్ చేయండి శైలి ' గుణం. చివరగా, “ని ఉపయోగించి టూల్‌టిప్‌ను జోడించండి appendChild() 'పద్ధతి:
lh. addEventListener ( 'మౌస్ ఓవర్' , ఫంక్షన్ ( ) {ఉపకరణ చిట్కా ఉంది = పత్రం. ఎలిమెంట్ సృష్టించండి ( 'డివి' ) ;
ఉపకరణ చిట్కా. అంతర్గత HTML = 'నైపుణ్యాలను నేర్చుకోవడానికి ఒక ఉత్తమ వెబ్‌సైట్' ;
ఉపకరణ చిట్కా. శైలి . దృశ్యమానత = 'కనిపించే' ;
ఉపకరణ చిట్కా. శైలి . స్థానం = 'సంపూర్ణ' ;
ఉపకరణ చిట్కా. శైలి . నేపథ్య రంగు = 'rgb(107, 101, 101)' ;
ఉపకరణ చిట్కా. శైలి . పాడింగ్ = '5px' ;
ఉపకరణ చిట్కా. శైలి . సరిహద్దు వ్యాసార్థం = '3px' ;
ఉపకరణ చిట్కా. శైలి . రంగు = 'తెలుపు' ;
ఉపకరణ చిట్కా. శైలి . వదిలేశారు = 'యాభై%' ;
ఉపకరణ చిట్కా. శైలి . వెడల్పు = '200px' ;
పత్రం. శరీరం . అనుబంధం చైల్డ్ ( ఉపకరణ చిట్కా ) ;
} ) ;
ఇక్కడ, 'ని ఉపయోగించండి mouseout ” కర్సర్ టెక్స్ట్ నుండి దూరంగా ఉన్నప్పుడు టూల్‌టిప్‌ను తీసివేసే ఈవెంట్:
lh. addEventListener ( 'మౌస్ అవుట్' , ఫంక్షన్ ( ) {
పత్రం. శరీరం . చైల్డ్ తొలగించండి ( ఉపకరణ చిట్కా ) ;
} ) ;
అవుట్‌పుట్
ఉదాహరణ 2: CSSతో జావాస్క్రిప్ట్ ఉపయోగించి ఉపకరణ చిట్కా
మీరు CSSతో జావాస్క్రిప్ట్‌లో టూల్‌టిప్‌ను కూడా సృష్టించవచ్చు.
అలా చేయడానికి, ట్యాగ్‌ని ఉపయోగించి టూల్‌టిప్ యొక్క వచనాన్ని చూపించడానికి ఒక ప్రాంతాన్ని సృష్టించండి మరియు ఒక ఐడిని కేటాయించండి “ #myTooltip ”:
< span id = 'myTooltip' > వ్యవధి >టెక్స్ట్ యొక్క సూచనలను మరియు టూల్‌టిప్‌ను ఉపయోగించి పొందండి getElementById() 'పద్ధతి:
ఎక్కడ lh = పత్రం. getElementById ( 'వచనం' ) ;ఉపకరణ చిట్కా ఉంది = పత్రం. getElementById ( 'myTooltip' ) ;
'పై టూల్‌టిప్‌కు కాల్ చేయండి mouseover ఫంక్షన్‌లో టెక్స్ట్‌ని సెట్ చేయడం ద్వారా ' ఈవెంట్‌ని ఉపయోగించి ' అంతర్గత HTML 'ఆస్తి:
lh. addEventListener ( 'మౌస్ ఓవర్' , ఫంక్షన్ ( ) {ఉపకరణ చిట్కా. శైలి . దృశ్యమానత = 'కనిపించే' ;
ఉపకరణ చిట్కా. అంతర్గత HTML = 'నైపుణ్యాలను నేర్చుకోవడానికి ఒక ఉత్తమ వెబ్‌సైట్' ;
} ) ;
“పై టూల్‌టిప్‌ను దాచండి mouseout ”ని సెట్ చేయడం ద్వారా ఈవెంట్” దృశ్యమానత 'ఆస్తి' దాచబడింది ”:
lh. addEventListener ( 'మౌస్ అవుట్' , ఫంక్షన్ ( ) {ఉపకరణ చిట్కా. శైలి . దృశ్యమానత = 'దాచిన' ;
} ) ;
ఒక ఐడిని సృష్టించండి' #myTooltip ” స్టైల్ షీట్‌లో టూల్‌టిప్‌ను స్టైల్ చేస్తుంది:
#myTooltip {దృశ్యమానత : దాచబడింది ;
వెడల్పు : 200px ;
తో - సూచిక : 1 ;
నేపథ్య - రంగు : rgb ( 107 , 101 , 101 ) ;
వచనం - సమలేఖనం : కేంద్రం ;
రంగు : తెలుపు ;
పాడింగ్ : 5px 0 ;
సరిహద్దు - వ్యాసార్థం : 3px ;
వదిలేశారు : యాభై %;
}
టెక్స్ట్‌పై టూల్‌టిప్ విజయవంతంగా అమలు చేయబడిందని మీరు చూడవచ్చు:
HTML మరియు CSS ఉపయోగించి టూల్‌టిప్‌ను ఎలా సృష్టించాలి?
మీరు జావాస్క్రిప్ట్ లేకుండా టూల్‌టిప్‌ను కూడా సృష్టించవచ్చు. HTML ఫైల్‌లో, “టెక్స్ట్‌ని సృష్టించండి Linux ”, టూల్‌టిప్ దానిపై హోవర్ చేస్తున్నప్పుడు చూపబడుతుంది. శీర్షిక/టెక్స్ట్
ట్యాగ్ లోపల టూల్‌టిప్ కోసం వచనాన్ని సెట్ చేయడానికి మూలకాన్ని సృష్టించండి:
< h5 తరగతి = 'ఉపకరణ చిట్కా' >
Linux
< వ్యవధి తరగతి = 'టూల్టిప్టెక్స్ట్' >
నైపుణ్యాలను నేర్చుకునే వేదిక
వ్యవధి >
h5 >
స్టైల్ షీట్‌లో, HTML మూలకాలకు కేటాయించబడే తరగతి లేదా idని సృష్టించండి. ఇక్కడ, మేము ఒక తరగతిని సృష్టిస్తాము ' ఉపకరణ చిట్కా 'అది శీర్షికకు కేటాయించబడింది:
. ఉపకరణ చిట్కా {
స్థానం : బంధువు ;
ప్రదర్శన : లైన్ లో - నిరోధించు ;
}
తరగతిని నిర్వచించండి' టూల్టిప్టెక్స్ట్ ” టూల్‌టిప్ యొక్క టెక్స్ట్‌ని స్టైల్ చేయడానికి మరియు దానికి HTMLని కేటాయించండి” ”ట్యాగ్:
. టూల్టిప్టెక్స్ట్ {
దృశ్యమానత : దాచబడింది ;
వెడల్పు : 150px ;
నేపథ్య - రంగు : rgb ( 107 , 101 , 101 ) ;
రంగు : #fff ;
వచనం - సమలేఖనం : కేంద్రం ;
పాడింగ్ : 5px 0 ;
సరిహద్దు - వ్యాసార్థం : 3px ;
స్థానం : సంపూర్ణ ;
తో - సూచిక : 1 ;
దిగువన : 125 %;
వదిలేశారు : యాభై %;
మార్జిన్ - వదిలేశారు : - 60px ;
అస్పష్టత : 0 ;
పరివర్తన : అస్పష్టత 0.3సె ;
}
సెట్' హోవర్ 'తో ప్రభావం' ఉపకరణ చిట్కా హోవర్ ఎఫెక్ట్‌పై టూల్‌టిప్‌ను చూపించడానికి క్లాస్:
. ఉపకరణ చిట్కా : హోవర్ చేయండి . టూల్టిప్టెక్స్ట్ {
దృశ్యమానత : కనిపించే ;
అస్పష్టత : 1 ;
}
అవుట్‌పుట్
మేము సాదా జావాస్క్రిప్ట్ టూల్‌టిప్‌కు సంబంధించిన అన్ని అవసరమైన సూచనలను సంకలనం చేసాము.
ముగింపు
జావాస్క్రిప్ట్‌ని ఉపయోగించి టూల్‌టిప్‌ని సృష్టించడానికి, “ని ఉపయోగించండి mouseover 'మరియు' mouseout ” ఈవెంట్‌లు, ఇది ఎలిమెంట్‌పై హోవర్‌లో టూల్‌టిప్‌ను చూపుతుంది మరియు మౌస్‌అవుట్ ఈవెంట్ ట్రిగ్గర్ అయినప్పుడు దానిని దాచిపెడుతుంది. టూల్‌టిప్‌ను స్టైలింగ్ చేయడానికి, 'ని ఉపయోగించండి శైలి ” జావాస్క్రిప్ట్‌లో లక్షణం. ఈ ఆర్టికల్‌లో, సాదా జావాస్క్రిప్ట్, CSSతో జావాస్క్రిప్ట్ మరియు జావాస్క్రిప్ట్ లేకుండా టూల్‌టిప్‌ని ఉపయోగించి టూల్‌టిప్‌ను సృష్టించే ఉత్తమ ఉదాహరణలను మేము ప్రదర్శించాము.