আপনি যখন একটি ওয়েবসাইট ডিজাইন করছেন, তখন আপনি সিদ্ধান্ত নিতে পারেন যে ব্যবহারকারী যখন সাইটের একটি উপাদানের উপর ঘোরাফেরা করেন তখন আপনি ওয়েব পৃষ্ঠায় কিছু সম্পর্কে অতিরিক্ত তথ্য প্রদর্শন করতে চান।
উদাহরণস্বরূপ, আপনি যদি একটি প্রায়শই জিজ্ঞাসিত প্রশ্ন পৃষ্ঠা ডিজাইন করেন, তাহলে আপনি ওয়েব পৃষ্ঠায় তালিকাভুক্ত প্রযুক্তিগত শর্তাবলী সম্পর্কে অতিরিক্ত তথ্য দেখতে চাইতে পারেন। এই তথ্যটি শুধুমাত্র তখনই উপস্থিত হওয়া উচিত যখন ব্যবহারকারী একটি প্রযুক্তিগত শব্দের উপর ঘোরাফেরা করে।
ব্যবহারকারী যখন কোনো উপাদানের উপর ঘোরাফেরা করে তখন কোনো কিছু সম্পর্কে তথ্য দেখানোর জন্য, আপনি একটি টুলটিপ তৈরি করতে পারেন। এই টিউটোরিয়ালে, আমরা একটি উদাহরণের সাথে আলোচনা করব, কিভাবে CSS এ টুলটিপ তৈরি করা যায়। এই টিউটোরিয়ালটি পড়ার শেষে, আপনি CSS-এ টুলটিপ তৈরিতে বিশেষজ্ঞ হয়ে উঠবেন।
CSS টুলটিপস
টুলটিপস একটি ওয়েব পৃষ্ঠায় একটি উপাদান সম্পর্কে তথ্য যোগ করতে ব্যবহার করা হয়. টুলটিপগুলি ওয়েবসাইটগুলিতে বিভিন্ন জায়গায় প্রদর্শিত হয়, বিশেষ করে যখন কোনও সাইটের লেখক কিছু স্পষ্ট করতে চান বা পাঠ্যের একটি ব্লকে একটি শব্দের সংজ্ঞা যোগ করতে চান।
কোন ডিফল্ট HTML উপাদান নেই যা একটি টুলটিপ তৈরি করতে ব্যবহৃত হয়। সুতরাং, একটি টুলটিপের মতো উপস্থিত একটি উপাদান ডিজাইন করতে আমাদেরকে HTML এবং CSS এর সংমিশ্রণের উপর নির্ভর করতে হবে।
আমাদের টুলটিপের জন্য HTML কোড লিখে শুরু করা যাক। এই উদাহরণে, আমরা একটি রেসিপি ওয়েবসাইটের জন্য একটি টুলটিপ তৈরি করতে যাচ্ছি। ব্যবহারকারী যখন prepare the baking tray শব্দটির উপর ঘোরাফেরা করে ., পাঠককে কীভাবে বেকিং ট্রে প্রস্তুত করতে হয় তা মনে করিয়ে দেওয়ার জন্য কিছু পাঠ্য সহ একটি টুলটিপ উপস্থিত হওয়া উচিত।
এখানে আমাদের টুলটিপের জন্য HTML কোড রয়েছে:
<html> <div style="text-align:center;"> <p>Instructions for baking:</p> <div class="tooltip">Prepare the baking tray. <span class="contents">Line tray with greaseproof paper.</span> <div> </div>
প্রথমত, আমাদের কোডে, আমরা একটি style দিয়ে একটি
ট্যাগ ব্যবহার করি পাঠ্য সহ একটি অনুচ্ছেদ তৈরি করতে Instructions for baking: .
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।
এর পরে, আমরা একটি বিভাজক তৈরি করেছি যেখানে আমাদের টুলটিপ প্রদর্শিত হবে। এটি prepare the baking tray পাঠ্য দেখাবে . আমাদের
prepare the baking tray শব্দের উপর ঘোরার সময় আমরা যে পাঠ্যটি দেখাতে চাই তা ধারণ করে। . এই মুহূর্তে, আমাদের কোড অন-স্ক্রীনে সমস্ত পাঠ্য দেখায়। এটি কারণ আমরা একটি টুলটিপ তৈরি করার জন্য আমাদের কোডে এখনও কোনো শৈলী প্রয়োগ করিনি। আমাদের CSS টুলটিপ তৈরি করতে আমরা যে স্টাইলগুলি ব্যবহার করতে যাচ্ছি তা এখানে:
<html>
<div style="text-align:center;">
<p>Instructions for baking:</p>
<div class="tooltip">Prepare the baking tray.
<span class="contents">Line tray with greaseproof paper.</span>
<div>
</div>
<style>
.tooltip {
display: inline-block;
position: relative;
margin: 50px;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: lightblue;
color: white;
text-align: center;
padding: 10px 0;
border-radius: 5px;
position: absolute;
z-index: 1;
}
.tooltip:hover .contents {
visibility: visible;
}
আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।
আমাদের কোডে, আমরা একটি টুলটিপ তৈরি করেছি যা ব্যবহারকারী যখন পাঠ্যের উপর ঘোরায় তখন ট্রিগার হয় prepare the baking tray . এই টুলটিপে আমাদের ওয়েবসাইটের পাঠকের জন্য কীভাবে বেকিং ট্রে প্রস্তুত করতে হয় তার একটি সংক্ষিপ্ত অনুস্মারক রয়েছে।
আসুন আমাদের সিএসএস কোড কীভাবে কাজ করে তা ভাঙ্গুন, যাতে আপনি জানেন কীভাবে আমাদের ডেটা টুলটিপ তৈরি করা হয়েছিল।
.টুলটিপ শৈলী
প্রথমে, আমরা .tooltip নামে একটি স্টাইল নিয়ম তৈরি করেছি, যা আমাদের HTML কোডে
আমরা টুলটিপের অবস্থান আপেক্ষিক হিসাবে সেট করি, যার অর্থ পৃষ্ঠাটি স্ক্রোল করা হলেও টুলটিপ একই জায়গায় থাকবে। আপনি CSS অবস্থান সম্পর্কে আমাদের নির্দেশিকা থেকে CSS অবস্থান সম্পর্কে আরও জানতে পারেন।
অবশেষে, আমরা আমাদের টুলটিপ পাঠ্যের চারপাশে একটি 50px মার্জিন নির্দিষ্ট করেছি, যা আমাদের টুলটিপ পাঠ্য এবং ওয়েব পৃষ্ঠার অন্যান্য উপাদানগুলির মধ্যে একটি স্থান তৈরি করতে দেয়। আপনি সিএসএস মার্জিনের জন্য আমাদের শিক্ষানবিস গাইডে মার্জিন সম্পর্কে আরও জানতে পারেন।
.tooltip .contents শৈলী
এর পরে, আমরা .tooltip .contents নামক একটি শৈলী নিয়ম সংজ্ঞায়িত করেছি, যা contents শ্রেণীর নাম সহ যেকোনো উপাদানে প্রয়োগ করা হয়। যার অভিভাবক শ্রেণীর নাম tooltip .
এই উদাহরণের জন্য, এর মানে হল এই স্টাইল নিয়মটি আমাদের ট্যাগে প্রয়োগ করা হয়েছে। এই নিয়মে আমাদের প্রকৃত টুলটিপ বৈশিষ্ট্যের শৈলী রয়েছে।
আমাদের .contents স্টাইলে, আমরা visibility-এর মান নির্দিষ্ট করি সম্পত্তি hidden . এর মানে হল যে, অন্যথায় বলা না হওয়া পর্যন্ত, টুলটিপটি ব্যবহারকারীর কাছ থেকে লুকানো থাকে।
তারপরে আমরা টুলটিপের প্রস্থ (প্রস্থ) 120px, টুলটিপের পটভূমির রঙ (ব্যাকগ্রাউন্ড-কালার) হালকা নীল এবং টুলটিপের পাঠ্যের রঙ (রঙ) সাদাতে সেট করি। উপরন্তু, আমরা টেক্সট-সারিবদ্ধ ব্যবহার করে উপাদানটির কেন্দ্রে টুলটিপে পাঠ্য সারিবদ্ধ করেছি।
আমাদের .contents নিয়মের শেষের দিকে, আমরা একটি 10px প্যাডিং সেট করি, যা আমাদের টুলটিপে পাঠ্য এবং এর সীমানার মধ্যে একটি স্থান তৈরি করে। আমরা 15px এর একটি বর্ডার-ব্যাসার্ধও সেট করি, যা আমাদের টুলটিপকে একটি বৃত্তাকার কোণার প্রভাব দেয়।
এরপরে, আমরা .contents উপাদানটির অবস্থান মান absolute এ সেট করি , যার মানে হল .contents উপাদানটি মূল উপাদানের সাথে সম্পর্কিত। এই ক্ষেত্রে, আমাদের HTML কোডের মূল উপাদান হল আমাদের
.tooltip:hover .contents Style
অবশেষে, আমরা .tooltip:hover .contents নামে একটি নিয়ম সংজ্ঞায়িত করেছি। এই নিয়মটি টুলটিপ টেক্সট দেখানোর জন্য ব্যবহার করা হয় যখন ব্যবহারকারী তাদের মাউসকে ক্লাসের নাম tooltip দিয়ে এলিমেন্টের উপর ঘোরায়। .
যখন এই নিয়মটি কার্যকর করা হয়, তখন .contents উপাদানটির দৃশ্যমানতা visible এ সেট করা হয় . এর মানে হল যে যখন ব্যবহারকারী টুলটিপের উপর ঘোরায়, টুলটিপটি ওয়েব পৃষ্ঠায় দৃশ্যমান হবে।
সিএসএস টুলটিপ অবস্থান করুন
আমাদের উপরের উদাহরণে, ব্যবহারকারী যখন prepare the baking tray লেবেলের উপর ঘোরায় তখন আমাদের টুলটিপটি আমাদের পাঠ্যের ডানদিকে প্রদর্শিত হয়। . যাইহোক, আমরা এটি কাস্টমাইজ করতে পারি যাতে আমাদের টুলটিপ আমাদের পাঠ্যের বিভিন্ন প্রান্তে উপস্থিত হয়।
সঠিক অবস্থান
আগের থেকে আমাদের কোডটি ইতিমধ্যেই আমাদের পাঠ্যের ডানদিকে আমাদের টুলটিপকে অবস্থান করে। যাইহোক, যদি আমরা ইতিমধ্যেই আমাদের টুলটিপকে অন্যভাবে দেখানোর জন্য স্টাইল করে থাকি এবং আমাদের টুলটিপকে সঠিক অবস্থানে নিয়ে যেতে চাই, তাহলে আমরা এই কোডটি ব্যবহার করতে পারি:
.tooltip .contents {
top: -5px;
left: 105%;
}
এই CSS নিয়ম, যখন আমাদের আগের কোডের সাথে মিলিত হয়, তখন টুলটিপটিকে আমাদের পাঠ্যের ডানদিকে রাখে। শীর্ষ:-5px নিয়ম টুলটিপটিকে তার ধারক উপাদানের কেন্দ্রের সাথে সারিবদ্ধ করে। বাম:105% নিয়ম টুলটিপটিকে কন্টেইনারের ডানদিকে রাখে কারণ এটি টুলটিপের প্রস্থের 105% দ্বারা বাম দিকে টুলটিপের অবস্থান অফসেট করে।
আমাদের কোড ফিরে আসে:
আপনি দেখতে পাচ্ছেন, আমাদের টুলটিপ আমাদের পাঠ্যের ডানদিকে প্রদর্শিত হবে৷
৷বাম অবস্থান
ধরুন আমরা চাই আমাদের টুলটিপটি আমাদের পাঠ্যের বাম দিকে প্রদর্শিত হোক। আমরা নিম্নলিখিত কোড ব্যবহার করে এটি ঘটতে পারি:
.tooltip .contents {
top: -5px;
right: 105%;
}
এই কোডটি, যখন আমাদের কোডে আগে থেকে যোগ করা হয়, তখন আমাদের টুলটিপটি আমাদের পাঠ্যের বাম দিকে অবস্থান করে। শীর্ষ:-5px নিয়ম টুলটিপটিকে তার কন্টেইনারের কেন্দ্রের সাথে সারিবদ্ধ করে, যেমনটি আমরা শেষ উদাহরণে আলোচনা করেছি। ডানদিকে:105% নিয়ম আমাদের কন্টেইনারের বাম দিকে আমাদের টুলটিপ স্থাপন করতে দেয় (বা, বরং, টুলটিপের প্রস্থের 105% দ্বারা ডানদিকে টুলটিপের অবস্থান অফসেট করে)।
আমাদের কোড যা ফেরত দেয় তা এখানে:
আমাদের টুলটিপ আমাদের পাঠ্যের বাম দিকে প্রদর্শিত হবে।
শীর্ষ অবস্থান
ধরা যাক যে আমরা আমাদের টুলটিপটি আমাদের পাঠ্যের উপরে উপস্থিত করতে চাই। আমরা নিম্নলিখিত কোড ব্যবহার করে এই কাজটি সম্পন্ন করতে পারি:
.tooltip .contents {
bottom: 100%;
left: 50%;
margin-left: -60px;
}
আমাদের কোড ফিরে আসে:
এই উদাহরণে, আমরা আমাদের টেক্সটের উপরে আমাদের টুলটিপ স্থাপন করতে তিনটি CSS শৈলী ব্যবহার করেছি। নীচে:100% এবং বাম:50% শৈলী আমাদের টুলটিপ লেবেলের প্রস্থের 100% দ্বারা আমাদের টুলটিপ অফসেট করার অনুমতি দেয় (prepare the baking tray ) যথাক্রমে টুলটিপ লেবেলের নীচে এবং বাম থেকে।
মার্জিন-বাম শৈলী আমাদের টুলটিপকে কেন্দ্রে রাখতে দেয়। যেহেতু আমাদের টুলটিপের প্রস্থ 120px, আমরা -60px (120px এর অর্ধেক) এর মার্জিন-বাম মান নির্দিষ্ট করেছি। এটি নিশ্চিত করে যে আমাদের টুলটিপ আমাদের টুলটিপ লেবেলের উপরে কেন্দ্রে প্রদর্শিত হবে।
নীচের অবস্থান
ধরুন আমরা চাই আমাদের টুলটিপ prepare the baking tray এর নীচে প্রদর্শিত হোক . লেবেল আমরা এই কোডটি ব্যবহার করে তা করতে পারি:
.tooltip .contents {
top: 100%;
left: 50%;
margin-left: -60px;
}
আমাদের কোড ফিরে আসে:
আমাদের কোড আমাদের Top Position হিসাবে একই শৈলী ব্যবহার করে একটি ব্যতিক্রম সঙ্গে উদাহরণ. এই উদাহরণে, আমরা টপ ব্যবহার করি:100% স্টাইল (নিচে এর পরিবর্তে:100% যেমন আমরা শেষ উদাহরণে ব্যবহার করেছি)। এই স্টাইলটি আমাদের টুলটিপ লেবেলের প্রস্থের 100% দ্বারা আমাদের টুলটিপ বক্স অফসেট করতে দেয় (prepare the baking tray .), লেবেলের নীচে আমাদের টুলটিপ বাক্সটি স্থাপন করার অনুমতি দেয়।
ফেড ইন টুলটিপস
আপনি যখন একটি টুলটিপ ডিজাইন করছেন, তখন আপনি সিদ্ধান্ত নিতে পারেন যে ব্যবহারকারী যখন টুলটিপের উপর ঘোরাফেরা করে তখন আপনি টুলটিপ পাঠ্যটি বিবর্ণ হয়ে যেতে চান। টুলটিপটি ব্যবহারকারীর স্ক্রিনে উপস্থিত হওয়ার জন্য সেট করা থাকলে এটি আপনাকে আরও নান্দনিকভাবে আনন্দদায়ক রূপান্তর তৈরি করতে দেয়।
এখানে একটি স্টাইল রয়েছে যা আপনি একটি ফেড-ইন টুলটিপ তৈরি করতে ব্যবহার করতে পারেন:
.tooltip .contents {
opacity: 0;
transition: opacity 2s;
}
.tooltip:hover .contents {
opacity: 1;
}
এই শৈলী, যখন আমাদের প্রথম উদাহরণ থেকে কোডের সাথে মিলিত হয়, তখন আপনাকে একটি ফেড-ইন প্রভাব অর্জন করতে দেয়। আসুন এটি কীভাবে কাজ করে তা ভেঙে দেওয়া যাক। প্রথমে, আমরা আমাদের টুলটিপের অপাসিটি 0-এ উল্লেখ করি। এর মানে হল টুলটিপটি লুকানো আছে।
তারপরে আমরা দুটি মান সহ একটি ট্রানজিশন বৈশিষ্ট্য নির্দিষ্ট করি:অস্বচ্ছতা এবং 2s। opacity CSS প্রপার্টি বোঝায় যা আমরা আমাদের ট্রানজিশনে প্রয়োগ করতে চাই এবং 2s আমাদের স্থানান্তরের সময়কাল বোঝায় (সেকেন্ডে)।
এর পরে, আমরা .tooltip:hover .contents নিয়ম তৈরি করি যা আমাদের টুলটিপের অপাসিটি 1 এ সেট করে যখন ব্যবহারকারী টুলটিপের উপর ঘোরায়।
এটি আমাদের একটি প্রভাব অর্জন করতে দেয় যেখানে, ব্যবহারকারী যখন টুলটিপের উপর ঘোরাফেরা করে, উপাদানটি সম্পূর্ণরূপে অস্বচ্ছ (অদৃশ্য) থেকে সম্পূর্ণরূপে দৃশ্যমান হয়ে উঠবে। যেহেতু আমরা আমাদের স্থানান্তরের সময়কাল 2s হিসাবে নির্দিষ্ট করেছি, এই রূপান্তরটি সম্পূর্ণ হতে দুই সেকেন্ড সময় নেবে৷
আপনি যদি CSS ট্রানজিশন সম্পর্কে আরও জানতে আগ্রহী হন, তাহলে CSS ট্রানজিশন প্রপার্টির জন্য আমাদের গাইড পড়ুন।
উপসংহার
টুলটিপগুলি একটি ওয়েব পৃষ্ঠায় অতিরিক্ত তথ্য প্রদর্শন করতে ব্যবহৃত হয়। HTML এবং CSS এর সাহায্যে, আপনি একটি নান্দনিকভাবে আনন্দদায়ক টুলটিপ উপাদান ডিজাইন করতে পারেন যা আপনাকে একটি ওয়েব পৃষ্ঠায় অতিরিক্ত তথ্য দেখাতে দেয়।
এই টিউটোরিয়ালটি উদাহরণের রেফারেন্স সহ, কীভাবে CSS-এ একটি টুলটিপ তৈরি করতে হয় এবং কীভাবে আপনার টুলটিপটিকে লেবেলের বাম, ডান, নীচে এবং শীর্ষে অবস্থান করতে হয় তা অনুসন্ধান করা হয়েছে। আমরা আরও আলোচনা করেছি যে কীভাবে একটি ফেড-ইন প্রভাব তৈরি করা যায় যা ব্যবহারকারী যখন টুলটিপ লেবেলের উপর ঘোরায় তখন ট্রিগার হয়।
একজন পেশাদার ওয়েব ডিজাইনারের মতো আপনার নিজের সিএসএস টুলটিপ ডিজাইন করা শুরু করার জন্য আপনার প্রয়োজনীয় জ্ঞান রয়েছে!
