இந்தக் கட்டுரை எளிய ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி உதவிக்குறிப்பைக் காண்பிக்கும்.
ஒரு எளிய ஜாவாஸ்கிரிப்ட் உதவிக்குறிப்பை எவ்வாறு உருவாக்குவது?
ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி உதவிக்குறிப்பை உருவாக்க, ' சுட்டி ஓவர் 'மற்றும்' சுட்டி 'நிகழ்வுகள். சிறந்த புரிதலுக்கு கீழே கொடுக்கப்பட்டுள்ள உதாரணங்களைப் பின்பற்றவும்.
எடுத்துக்காட்டு 1: ஜாவாஸ்கிரிப்டைப் பயன்படுத்துவதற்கான உதவிக்குறிப்பு
கொடுக்கப்பட்ட எடுத்துக்காட்டில், நாங்கள் தூய ஜாவாஸ்கிரிப்ட்டில் ஒரு உதவிக்குறிப்பை உருவாக்குவோம், மேலும் '' ஐப் பயன்படுத்தி உதவிக்குறிப்பை வடிவமைப்போம். பாணி ” பண்பு.
முதலில், மவுஸ்ஓவர் நிகழ்வில் ஒரு உதவிக்குறிப்பைக் காட்ட விரும்பும் உரையை உருவாக்கவும்:
< h5 ஐடி = 'உரை' > லினக்ஸ் h5 >
'' ஐப் பயன்படுத்தி உதவிக்குறிப்பு தோன்றும் உரையைப் பெறவும் getElementById() ”முறை:
எங்கே lh = ஆவணம். getElementById ( 'உரை' ) ;
இப்போது அழைக்கவும் ' addEventListener() 'முறையை கடந்து செல்வதன் மூலம்' சுட்டி ஓவர் ” நிகழ்வு மற்றும் ஒரு செயல்பாடு() ஒரு அளவுருவாக. வரையறுக்கப்பட்ட செயல்பாட்டில், முதலில், '' ஐ உருவாக்குவதன் மூலம் ஒரு உதவிக்குறிப்பை உருவாக்குவோம். div 'உறுப்பு, மிதவையில் காண்பிக்கப்படும் உரையை அமைக்கவும், மேலும் உதவிக்குறிப்பின் சில ஸ்டைலிங் 'ஐப் பயன்படுத்தி அமைக்கவும் பாணி ” பண்பு. இறுதியாக, '' ஐப் பயன்படுத்தி உதவிக்குறிப்பைச் சேர்க்கவும் appendChild() ”முறை:
lh. addEventListener ( 'சுட்டி மேல்' , செயல்பாடு ( ) {உதவிக்குறிப்பாக இருந்தது = ஆவணம். உருவாக்க உறுப்பு ( 'டிவி' ) ;
உதவிக்குறிப்பு. உள் HTML = 'திறமைகளை கற்க சிறந்த இணையதளம்' ;
உதவிக்குறிப்பு. பாணி . தெரிவுநிலை = 'தெரியும்' ;
உதவிக்குறிப்பு. பாணி . நிலை = 'அறுதி' ;
உதவிக்குறிப்பு. பாணி . பின்னணி நிறம் = 'rgb(107, 101, 101)' ;
உதவிக்குறிப்பு. பாணி . திணிப்பு = '5px' ;
உதவிக்குறிப்பு. பாணி . எல்லை ஆரம் = '3px' ;
உதவிக்குறிப்பு. பாணி . நிறம் = 'வெள்ளை' ;
உதவிக்குறிப்பு. பாணி . விட்டு = 'ஐம்பது%' ;
உதவிக்குறிப்பு. பாணி . அகலம் = '200px' ;
ஆவணம். உடல் . appendChild ( உதவிக்குறிப்பு ) ;
} ) ;
இங்கே, பயன்படுத்தவும் ' சுட்டி கர்சர் உரையிலிருந்து விலகிச் செல்லும் போது உதவிக்குறிப்பை அகற்றும் நிகழ்வு:
lh. addEventListener ( 'சுட்டி வெளியே' , செயல்பாடு ( ) {
ஆவணம். உடல் . குழந்தையை அகற்று ( உதவிக்குறிப்பு ) ;
} ) ;
வெளியீடு
எடுத்துக்காட்டு 2: CSS உடன் ஜாவாஸ்கிரிப்டைப் பயன்படுத்துவதற்கான உதவிக்குறிப்பு
நீங்கள் CSS உடன் ஜாவாஸ்கிரிப்டில் ஒரு உதவிக்குறிப்பை உருவாக்கலாம்.
அவ்வாறு செய்ய, குறிச்சொல்லைப் பயன்படுத்தி உதவிக்குறிப்பின் உரையைக் காட்ட ஒரு பகுதியை உருவாக்கி, ஒரு ஐடியை ஒதுக்கவும்” #myTooltip ”:
< இடைவெளி ஐடி = 'myTooltip' > இடைவெளி >உரையின் குறிப்புகள் மற்றும் உதவிக்குறிப்பைப் பயன்படுத்தி ' getElementById() ”முறை:
எங்கே lh = ஆவணம். getElementById ( 'உரை' ) ;உதவிக்குறிப்பாக இருந்தது = ஆவணம். getElementById ( 'myTooltip' ) ;
உதவிக்குறிப்பை அழைக்கவும் ' சுட்டி ஓவர் '' ஐப் பயன்படுத்தி செயல்பாட்டில் உரையை அமைப்பதன் மூலம் நிகழ்வு உள் HTML 'சொத்து:
lh. addEventListener ( 'சுட்டி மேல்' , செயல்பாடு ( ) {உதவிக்குறிப்பு. பாணி . தெரிவுநிலை = 'தெரியும்' ;
உதவிக்குறிப்பு. உள் HTML = 'திறமைகளை கற்க சிறந்த இணையதளம்' ;
} ) ;
உதவிக்குறிப்பை மறை “ சுட்டி 'நிகழ்வை அமைப்பதன் மூலம்' தெரிவுநிலை 'சொத்து' மறைக்கப்பட்டுள்ளது ”:
lh. addEventListener ( 'சுட்டி வெளியே' , செயல்பாடு ( ) {உதவிக்குறிப்பு. பாணி . தெரிவுநிலை = 'மறைக்கப்பட்ட' ;
} ) ;
ஐடியை உருவாக்கு' #myTooltip ” ஸ்டைல் ஷீட்டில் டூல்டிப் ஸ்டைலாக இருக்கும்:
#myTooltip {தெரிவுநிலை : மறைக்கப்பட்டுள்ளது ;
அகலம் : 200px ;
உடன் - குறியீட்டு : 1 ;
பின்னணி - நிறம் : rgb ( 107 , 101 , 101 ) ;
உரை - சீரமைக்க : மையம் ;
நிறம் : வெள்ளை ;
திணிப்பு : 5px 0 ;
எல்லை - ஆரம் : 3px ;
விட்டு : ஐம்பது %;
}
உதவிக்குறிப்பு உரையில் வெற்றிகரமாக செயல்படுத்தப்பட்டதை நீங்கள் காணலாம்:
HTML மற்றும் CSS ஐப் பயன்படுத்தி உதவிக்குறிப்பை உருவாக்குவது எப்படி?
நீங்கள் ஜாவாஸ்கிரிப்ட் இல்லாமல் ஒரு உதவிக்குறிப்பை உருவாக்கலாம். HTML கோப்பில், உரையை உருவாக்கவும் ' லினக்ஸ் ”, அதில் வட்டமிடும்போது உதவிக்குறிப்பு காண்பிக்கப்படும். தலைப்பு/உரை
குறிச்சொல்லின் உள்ளே உதவிக்குறிப்புக்கான உரையை அமைக்க உறுப்பை உருவாக்கவும்:
< h5 வர்க்கம் = 'உதவிக்குறிப்பு' >
லினக்ஸ்
< இடைவெளி வர்க்கம் = 'உதவிக்குறிப்பு உரை' >
திறன்களைக் கற்றுக்கொள்ள ஒரு தளம்
இடைவெளி >
h5 >
நடை தாளில், HTML கூறுகளுக்கு ஒதுக்கப்படும் ஒரு கிளாஸ் அல்லது ஐடியை உருவாக்கவும். இங்கே, நாங்கள் ஒரு வகுப்பை உருவாக்குவோம் ' உதவிக்குறிப்பு ” என்று தலைப்புக்கு ஒதுக்கப்பட்டுள்ளது:
. உதவிக்குறிப்பு {
நிலை : உறவினர் ;
காட்சி : கோட்டில் - தொகுதி ;
}
ஒரு வகுப்பை வரையறுக்கவும் ' உதவிக்குறிப்பு உரை ' உதவிக்குறிப்பின் உரையை வடிவமைக்க மற்றும் அதற்கு HTML ஐ ஒதுக்கவும் ' 'குறிச்சொல்:
. உதவிக்குறிப்பு உரை {
தெரிவுநிலை : மறைக்கப்பட்டுள்ளது ;
அகலம் : 150px ;
பின்னணி - நிறம் : rgb ( 107 , 101 , 101 ) ;
நிறம் : #fff ;
உரை - சீரமைக்க : மையம் ;
திணிப்பு : 5px 0 ;
எல்லை - ஆரம் : 3px ;
நிலை : அறுதி ;
உடன் - குறியீட்டு : 1 ;
கீழே : 125 %;
விட்டு : ஐம்பது %;
விளிம்பு - விட்டு : - 60px ;
ஒளிபுகாநிலை : 0 ;
மாற்றம் : ஒளிபுகாநிலை 0.3வி ;
}
அமை ' மிதவை ' விளைவு ' உதவிக்குறிப்பு ”வகுப்பு மிதவை விளைவுக்கான உதவிக்குறிப்பைக் காட்ட:
. உதவிக்குறிப்பு : மிதவை . உதவிக்குறிப்பு உரை {
தெரிவுநிலை : தெரியும் ;
ஒளிபுகாநிலை : 1 ;
}
வெளியீடு
எளிய ஜாவாஸ்கிரிப்ட் உதவிக்குறிப்புக்கு தேவையான அனைத்து வழிமுறைகளையும் நாங்கள் தொகுத்துள்ளோம்.
முடிவுரை
ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி உதவிக்குறிப்பை உருவாக்க, ' சுட்டி ஓவர் 'மற்றும்' சுட்டி ” நிகழ்வுகள், இது உறுப்பின் மீது வட்டமிடுவதற்கான உதவிக்குறிப்பைக் காட்டுகிறது மற்றும் மவுஸ்அவுட் நிகழ்வு தூண்டப்படும்போது அதை மறைக்கிறது. உதவிக்குறிப்பை வடிவமைக்க, பயன்படுத்தவும் ' பாணி ஜாவாஸ்கிரிப்டில் உள்ள பண்புக்கூறு. இந்தக் கட்டுரையில், எளிய ஜாவாஸ்கிரிப்ட், CSS உடன் ஜாவாஸ்கிரிப்ட் மற்றும் ஜாவாஸ்கிரிப்ட் இல்லாமல் டூல்டிப் ஆகியவற்றைப் பயன்படுத்தி ஒரு உதவிக்குறிப்பை உருவாக்குவதற்கான சிறந்த எடுத்துக்காட்டுகளை நாங்கள் விளக்கினோம்.