এই নিবন্ধটি প্লেইন জাভাস্ক্রিপ্ট ব্যবহার করে টুলটিপ প্রদর্শন করবে।
কিভাবে একটি প্লেইন জাভাস্ক্রিপ্ট টুলটিপ তৈরি করবেন?
জাভাস্ক্রিপ্ট ব্যবহার করে একটি টুলটিপ তৈরি করতে, ' মাউসওভার ' এবং ' মাউসআউট ' ঘটনা। একটি ভাল বোঝার জন্য নীচের প্রদত্ত উদাহরণ অনুসরণ করুন.
উদাহরণ 1: জাভাস্ক্রিপ্ট ব্যবহার করে টুলটিপ
প্রদত্ত উদাহরণে, আমরা খাঁটি জাভাস্ক্রিপ্টে একটি টুলটিপ তৈরি করব এবং 'ব্যবহার করে টুলটিপ স্টাইল করব। শৈলী ” বৈশিষ্ট্য।
প্রথমে, একটি পাঠ্য তৈরি করুন যেখানে আমরা মাউসওভার ইভেন্টে একটি টুলটিপ দেখাতে চাই:
< h5 আইডি = 'পাঠ্য' > লিনাক্স h5 >
টেক্সট পান যেখানে টুলটিপ ' ব্যবহার করে প্রদর্শিত হবে getElementById() 'পদ্ধতি:
যেখানে lh = নথি getElementById ( 'পাঠ্য' ) ;
এখন কল করুন ' AddEventListener() 'পদ্ধতি পাস করে' মাউসওভার ” ইভেন্ট এবং একটি ফাংশন() একটি প্যারামিটার হিসাবে। সংজ্ঞায়িত ফাংশনে, প্রথমে আমরা একটি টুলটিপ তৈরি করে “ div ” উপাদান, হোভারে প্রদর্শিত পাঠ্যটি সেট করুন এবং টুলটিপের কিছু স্টাইলিং সেট করুন “ শৈলী ” বৈশিষ্ট্য। অবশেষে, ' ব্যবহার করে টুলটিপ যোগ করুন appendChild() 'পদ্ধতি:
lh AddEventListener ( 'মাউস ওভার' , ফাংশন ( ) {টুলটিপ ছিল = নথি এলিমেন্ট তৈরি করুন ( 'div' ) ;
টুলটিপ innerHTML = 'দক্ষতা শেখার জন্য একটি সেরা ওয়েবসাইট' ;
টুলটিপ শৈলী . দৃশ্যমানতা = 'দৃশ্যমান' ;
টুলটিপ শৈলী . অবস্থান = 'পরম' ;
টুলটিপ শৈলী . পেছনের রং = 'rgb(107, 101, 101)' ;
টুলটিপ শৈলী . প্যাডিং = '5px' ;
টুলটিপ শৈলী . সীমানা রেডিয়াস = '3px' ;
টুলটিপ শৈলী . রঙ = 'সাদা' ;
টুলটিপ শৈলী . বাম = 'পঞ্চাশ%' ;
টুলটিপ শৈলী . প্রস্থ = '200px' ;
নথি শরীর . শিশুকে সংযুক্ত করুন ( টুলটিপ ) ;
} ) ;
এখানে, ব্যবহার করুন ' মাউসআউট ” ইভেন্ট যা টুলটিপ সরিয়ে দেবে যখন কার্সার পাঠ্য থেকে দূরে থাকবে:
lh AddEventListener ( 'মাউসআউট' , ফাংশন ( ) {
নথি শরীর . শিশুকে সরান ( টুলটিপ ) ;
} ) ;
আউটপুট
উদাহরণ 2: CSS সহ জাভাস্ক্রিপ্ট ব্যবহার করে টুলটিপ
আপনি CSS দিয়ে JavaScript এ একটি টুলটিপও তৈরি করতে পারেন।
এটি করার জন্য, ট্যাগ ব্যবহার করে টুলটিপের পাঠ্য দেখানোর জন্য একটি এলাকা তৈরি করুন এবং একটি আইডি বরাদ্দ করুন “ #myTooltip ”:
< স্প্যান আইডি = 'myTooltip' >> স্প্যান >' ব্যবহার করে পাঠ্যের রেফারেন্স এবং টুলটিপ পান getElementById() 'পদ্ধতি:
যেখানে lh = নথি getElementById ( 'পাঠ্য' ) ;টুলটিপ ছিল = নথি getElementById ( 'myTooltip' ) ;
টুলটিপে কল করুন ' মাউসওভার ' ব্যবহার করে ফাংশনে পাঠ্য সেট করে ইভেন্ট innerHTML 'সম্পত্তি:
lh AddEventListener ( 'মাউস ওভার' , ফাংশন ( ) {টুলটিপ শৈলী . দৃশ্যমানতা = 'দৃশ্যমান' ;
টুলটিপ innerHTML = 'দক্ষতা শেখার জন্য একটি সেরা ওয়েবসাইট' ;
} ) ;
টুলটিপটি লুকান ' মাউসআউট ' ইভেন্ট সেট করে ' দৃশ্যমানতা 'সম্পত্তি' গোপন ”:
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.3s ;
}
সেট করুন ' হোভার 'এর সাথে প্রভাব' টুলটিপ হভার প্রভাবে টুলটিপ দেখানোর জন্য ক্লাস:
. টুলটিপ : হোভার টুলটিপটেক্সট {
দৃশ্যমানতা : দৃশ্যমান ;
অস্বচ্ছতা : 1 ;
}
আউটপুট
আমরা সাধারণ জাভাস্ক্রিপ্ট টুলটিপের সাথে প্রাসঙ্গিক সমস্ত প্রয়োজনীয় নির্দেশাবলী সংকলন করেছি।
উপসংহার
জাভাস্ক্রিপ্ট ব্যবহার করে একটি টুলটিপ তৈরি করতে, ' মাউসওভার ' এবং ' মাউসআউট ” ইভেন্ট, যা এলিমেন্টে হোভার করার টুলটিপ দেখায় এবং মাউসআউট ইভেন্টটি ট্রিগার হলে এটি লুকিয়ে রাখে। টুলটিপ স্টাইল করার জন্য, ' শৈলী ' জাভাস্ক্রিপ্টে বৈশিষ্ট্য। এই নিবন্ধে, আমরা প্লেইন জাভাস্ক্রিপ্ট, সিএসএস সহ জাভাস্ক্রিপ্ট এবং জাভাস্ক্রিপ্ট ছাড়া টুলটিপ ব্যবহার করে একটি টুলটিপ তৈরি করার সম্ভাব্য সেরা উদাহরণগুলি প্রদর্শন করেছি।