যখন আপনি একটি ওয়েবসাইট ডিজাইন করছেন, তখন আপনি সিদ্ধান্ত নিতে পারেন যে আপনি ওয়েব পেজের যেকোনো কিছু সম্পর্কে অতিরিক্ত তথ্য দেখাতে চান যখন ব্যবহারকারী সাইটের একটি এলিমেন্টের ওপর হোভার (hover) করবে।
উদাহরণস্বরূপ, আপনি যদি একটি Frequently Asked Questions পেজ ডিজাইন করছেন, তবে আপনি ওয়েব পেজে তালিকাভুক্ত প্রযুক্তিগত শব্দ সম্পর্কে অতিরিক্ত তথ্য দেখাতে চাইতে পারেন। এই তথ্যটি শুধু তখন দেখাবে যখন ব্যবহারকারী একটি প্রযুক্তিগত শব্দের ওপর হোভার করবে।
যখন ব্যবহারকারী একটি এলিমেন্টের ওপর হোভার করবে তখন সেটি সম্পর্কে তথ্য দেখাতে, আপনি একটি টুলটিপ (tooltip) তৈরি করতে পারেন। এই টিউটোরিয়ালে, একটি উদাহরণের রেফারেন্স নিয়ে, CSS-এ টুলটিপ কীভাবে তৈরি করতে হয় তা আলোচনা করা হয়েছে। এই টিউটোরিয়াল পড়া শেষে আপনি CSS-এ টুলটিপ তৈরি করতে এক্সপার্ট হবেন।
CSS টুলটিপস (CSS Tooltips)
টুলটিপস একটি ওয়েব পেজের একটি এলিমেন্ট সম্পর্কে তথ্য যোগ করতে ব্যবহৃত হয়। টুলটিপস ওয়েবসাইটের অনেক ভিন্ন জায়গায় ظاهر হয়, বিশেষ করে যখন একটি সাইটের লেখক কিছু ব্যাখ্যা করতে চায় বা টেক্সটের একটি ব্লকে একটি শব্দের সংজ্ঞা যোগ করতে চায়।
টুলটিপ তৈরি করার জন্য কোনো ডিফল্ট 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>প্রথমে, আমাদের কোডে, আমরা একটি <div> ট্যাগ তৈরি করেছি যার একটি style অ্যাট্রিবিউট সেট করা আছে। আমরা যে স্টাইলটি সংজ্ঞায়িত করেছি সেটি আমাদের <div> ট্যাগের টেক্সটকে এলিমেন্টের কেন্দ্রে অ্যালাইন করে (text-align: center)। তারপর, আমরা একটি <p> ট্যাগ ব্যবহার করি Instructions for baking: টেক্সট ধারণকারী একটি প্যারাগ্রাফ তৈরি করতে।
পরবর্তী, আমরা একটি ডিভাইডার তৈরি করেছি যাতে আমাদের টুলটিপ ظاهر হবে। এটি Prepare the baking tray টেক্সট দেখাবে। আমাদের <div> ট্যাগের ভিতরে একটি <span> ট্যাগ রয়েছে যাতে সেই টেক্সট রয়েছে যা আমরা চাই যে ব্যবহারকারী 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; }
</style> 
কোড এডিটরের উপরের বাটনে ক্লিক করুন আমাদের HTML/CSS কোডের আউটপুট দেখতে।
আমাদের কোডে, আমরা একটি টুলটিপ তৈরি করেছি যা ট্রিগার হয় যখন ব্যবহারকারী Prepare the baking tray টেক্সটের ওপর হোভার করে। এই টুলটিপে একটি সংক্ষিপ্ত রিমাইন্ডার রয়েছে কীভাবে বেকিং ট্রে প্রস্তুত করতে হয় পাঠকের জন্য।
চলুন আমাদের CSS কোড কীভাবে কাজ করে তা ব্রেক ডাউন করি, যাতে আপনি জানেন আমাদের ডেটা টুলটিপ কীভাবে তৈরি করা হয়েছে।
.tooltip স্টাইল
প্রথমে, আমরা একটি স্টাইল রুল তৈরি করেছি যার নাম .tooltip, যা আমাদের HTML কোডের <div> ট্যাগে প্রযোজ্য। এই স্টাইল এলিমেন্টকে একটি ইনলাইন-লেভেল ব্লক কন্টেইনার হিসেবে সংজ্ঞায়িত করে, যার মানে এটি একটি নতুন লাইনে শুরু হয়।
আমরা টুলটিপের পজিশন (position) relative সেট করেছি, যার মানে পেজ স্ক্রোল করলেও টুলটিপ একই জায়গায় থাকবে। আপনি CSS পজিশনিং সম্পর্কে আরও জানতে আমাদের CSS position গাইড পড়তে পারেন।
অবশেষে, আমরা আমাদের টুলটিপ টেক্সটের চারপাশে 50px মার্জিন নির্দিষ্ট করেছি, যা আমাদের টুলটিপ টেক্সট এবং ওয়েব পেজের অন্যান্য এলিমেন্টের মধ্যে স্পেস তৈরি করতে দেয়। আপনি মার্জিন সম্পর্কে আরও জানতে আমাদের CSS margin বেগinners গাইড পড়তে পারেন।
.tooltip .contents স্টাইল
পরবর্তী, আমরা একটি স্টাইল রুল সংজ্ঞায়িত করেছি যার নাম .tooltip .contents, যা যেকোনো এলিমেন্টে প্রযোজ্য হয় যার ক্লাস নাম contents এবং যার প্যারেন্ট ক্লাসের নাম tooltip।
এই উদাহরণের জন্য, এর মানে এই স্টাইল রুল আমাদের <span> ট্যাগে প্রযোজ্য। এই রুলে আমাদের অ্যাকচুয়াল টুলটিপ অ্যাট্রিবিউটের স্টাইলগুলো রয়েছে।
আমাদের .contents স্টাইলে, আমরা visibility প্রোপার্টির মান hidden সেট করেছি। এর মানে, অন্যথা নির্দিষ্ট না করা পর্যন্ত, টুলটিপ ব্যবহারকারীর থেকে লুকানো থাকবে।
তারপর আমরা টুলটিপের প্রস্থ (width) 120px, ব্যাকগ্রাউন্ড রঙ (background-color) হালকা নীল, এবং টুলটিপের টেক্সট রঙ (color) সাদা সেট করেছি। 덧붙ে, আমরা টুলটিপের টেক্সটকে এলিমেন্টের কেন্দ্রে অ্যালাইন করেছি text-align ব্যবহার করে।
আমাদের .contents রুলের শেষ দিকে, আমরা 10px প্যাডিং সেট করেছি, যা আমাদের টুলটিপের টেক্সট এবং এর বর্ডারের মধ্যে স্পেস তৈরি করে। আমরা 15px বর্ডার-রেডিয়াসও সেট করেছি, যা আমাদের টুলটিপকে রাউন্ডেড কর্নার ইফেক্ট দেয়।
পরবর্তী, আমরা .contents এলিমেন্টের পজিশন মান absolute সেট করেছি, যার মানে .contents এলিমেন্টটি প্যারেন্ট এলিমেন্টের সাথে রিলেটিভে পজিশন করা। এই কেসে, আমাদের HTML কোডে প্যারেন্ট এলিমেন্ট হলো আমাদের <div> ট্যাগ, যার মানে আমাদের টুলটিপ সবসময় আমাদের কোডের <div> ট্যাগের পাশে ظاهر হবে।
.tooltip:hover .contents স্টাইল
অবশেষে, আমরা একটি রুল সংজ্ঞায়িত করেছি যার নাম .tooltip:hover .contents। এই রুলটি টুলটিপ টেক্সট দেখাতে ব্যবহৃত হয় যখন ব্যবহারকারী তাদের মাউস tooltip ক্লাস নামের এলিমেন্টের ওপর হোভার করে।
যখন এই রুল এক্সিকিউট হয়, .contents এলিমেন্টের ভিজিবিলিটি (visibility) visible সেট করা হয়। এর মানে যখন ব্যবহারকারী টুলটিপের ওপর হোভার করবে, টুলটিপ ওয়েব পেজে দৃশ্যমান হবে।
CSS টুলটিপ পজিশন করা (Position the CSS Tooltip)
আমাদের উপরের উদাহরণে, আমাদের টুলটিপ ব্যবহারকারী Prepare the baking tray লেবেলের ওপর হোভার করলে আমাদের টেক্সটের ডান পাশে ظاهر হয়। যাইহোক, আমরা এটি কাস্টমাইজ করতে পারি যাতে আমাদের টুলটিপ আমাদের টেক্সটের ভিন্ন প্রান্তে ظاهر হয়।
রাইট পজিশন (Right Position)
আমাদের আগের কোডই ইতিমধ্যে আমাদের টুলটিপকে আমাদের টেক্সটের ডান পাশে পজিশন করে। যাইহোক, আপনি যদি ইতিমধ্যে আপনার টুলটিপকে ভিন্নভাবে ظاهر হওয়ার জন্য স্টাইল করে থাকেন, এবং আপনার টুলটিপকে রাইট পজিশনে ফিরিয়ে আনা চান, তবে আপনি এই কোড ব্যবহার করতে পারেন:
.tooltip .contents { top: -5px; left: 105%; }এই CSS রুল, আমাদের আগের কোডের সাথে কম্বাইন করা হলে, টুলটিপকে আমাদের টেক্সটের ডান পাশে পজিশন করে। top: -5px রুল টুলটিপকে এর কন্টেইনার এলিমেন্টের কেন্দ্রের সাথে অ্যালাইন করে। left: 105% রুল টুলটিপকে কন্টেইনারের ডান পাশে রাখে কারণ এটি টুলটিপের পজিশনকে বাম পাশে 105% অফসেট করে (টুলটিপের প্রস্থের)।
আমাদের কোডের আউটপুট:
আপনি দেখতে পারেন, আমাদের টুলটিপ আমাদের টেক্সটের ডান পাশে ظاهر হচ্ছে।
লেফট পজিশন (Left Position)
মান লইজिए আমরা আমাদের টুলটিপকে আমাদের টেক্সটের বাম পাশে দেখাতে চাই। আমরা নিচের কোড ব্যবহার করে এটি করতে পারি:
.tooltip .contents { top: -5px; right: 105%; }এই কোড, আমাদের আগের কোডের সাথে যোগ করা হলে, আমাদের টুলটিপকে আমাদের টেক্সটের বাম পাশে পজিশন করে। top: -5px রুল টুলটিপকে এর কন্টেইনারের কেন্দ্রের সাথে অ্যালাইন করে, যেমন আমরা গত উদাহরণে আলোচনা করেছি। right: 105% রুল আমাদের টুলটিপকে কন্টেইনারের বাম পাশে রাখার অনুমতি দেয় (বরং, টুলটিপের পজিশনকে ডান পাশে 105% অফসেট করে টুলটিপের প্রস্থের)।
এখানে আমাদের কোডের আউটপুট:
আমাদের টুলটিপ আমাদের টেক্সটের বাম পাশে ظاهر হচ্ছে।
টপ পজিশন (Top Position)
চলুন ধরি আমরা আমাদের টুলটিপকে আমাদের টেক্সটের উপরে দেখাতে চাই। আমরা নিচের কোড ব্যবহার করে এই কাজটি সম্পন্ন করতে পারি:
.tooltip .contents { bottom: 100%; left: 50%; margin-left: -60px; }আমাদের কোডের আউটপুট:
এই উদাহরণে, আমরা তিনটি CSS স্টাইল ব্যবহার করেছি আমাদের টুলটিপকে আমাদের টেক্সটের উপরে পজিশন করার জন্য। bottom: 100% এবং left: 50% স্টাইলগুলো আমাদের টুলটিপকে টুলটিপ লেবেল (Prepare the baking tray) থেকে 100% প্রস্থ অফসেট করতে দেয় যথাক্রমে নিচ এবং বাম থেকে।
margin-left স্টাইল আমাদের টুলটিপকে কেন্দ্রস্থ করতে দেয়। কারণ আমাদের টুলটিপের প্রস্থ 120px, আমরা margin-left এর মান -60px (120px-এর অর্ধেক) নির্দিষ্ট করেছি। এটি নিশ্চিত করে আমাদের টুলটিপ আমাদের টুলটিপ লেবেলের উপরে কেন্দ্রস্থ হয়ে ظاهر হয়।
বটম পজিশন (Bottom Position)
মান লইজिए আমরা আমাদের টুলটিপকে Prepare the baking tray লেবেলের নিচে দেখাতে চাই। আমরা নিচের কোড ব্যবহার করে এটি করতে পারি:
.tooltip .contents { top: 100%; left: 50%; margin-left: -60px; }আমাদের কোডের আউটপুট:
আমাদের কোড আমাদের Top Position উদাহরণের মতো একই স্টাইলগুলো ব্যবহার করে একটি ব্যতিক্রম ছাড়া। এই উদাহরণে, আমরা top: 100% স্টাইল ব্যবহার করেছি (bottom: 100% এর পরিবর্তে যা আমরা গত উদাহরণে ব্যবহার করেছি)। এই স্টাইল আমাদের টুলটিপ বক্সকে টুলটিপ লেবেল (Prepare the baking tray.) এর প্রস্থের 100% অফসেট করতে দেয়, যা আমাদের টুলটিপ বক্সকে লেবেলের নিচে পজিশন করতে দেয়।
ফেড-ইন টুলটিপস (Fade in Tooltips)
যখন আপনি একটি টুলটিপ ডিজাইন করছেন, তখন আপনি সিদ্ধান্ত নিতে পারেন যে আপনি চান টুলটিপ টেক্সট ফেড-ইন (fade in) হবে যখন ব্যবহারকারী টুলটিপের ওপর হোভার করবে। এটি আপনাকে একটি আরও সৌন্দর্যśীল ট্রানজিশন (transition) তৈরি করতে দেয় যখন টুলটিপ ব্যবহারকারীর স্ক্রিনে ظاهر হওয়ার জন্য সেট করা হয়।
এখানে একটি স্টাইল যা আপনি ফেড-ইন টুলটিপ তৈরি করতে ব্যবহার করতে পারেন:
.tooltip .contents { opacity: 0; transition: opacity 2s; }
.tooltip:hover .contents { opacity: 1; }এই স্টাইল, আমাদের প্রথম উদাহরণের কোডের সাথে কম্বাইন করা হলে, আপনাকে একটি ফেড-ইন ইফেক্ট অর্জন করতে দেয়। চলুন এটি কীভাবে কাজ করে তা ব্রেক ডাউন করি। প্রথমে, আমরা আমাদের টুলটipas opacity 0 সেট করেছি। এর মানে টুলটিপ লুকানো আছে।
তারপর আমরা একটি ট্রানজিশন প্রোপার্টি নির্দিষ্ট করেছি দুটি মান সহ: opacity এবং 2s। opacity হলো সি এস এস প্রোপার্টি যা আমরা আমাদের ট্রানজিশনে প্রযোজ্য করতে চাই, এবং 2s হলো আমাদের ট্রানজিশনের সময়কাল (সেকেন্ডে)।
পরবর্তী, আমরা .tooltip:hover .contents রুল তৈরি করেছি যা ব্যবহারকারী টুলটিপের ওপর হোভার করলে টুলটিপের opacity 1 সেট করে।
এটি আমাদের একটি ইফেক্ট অর্জন করতে দেয় যেখানে, যখন ব্যবহারকারী টুলটিপের ওপর হোভার করবে, এলিমেন্টটি সম্পূর্ণ অপেক (invisible) থেকে সম্পূর্ণ দৃশ্যমান হয়ে যাবে। কারণ আমরা আমাদের ট্রানজিশনের সময়কাল 2s নির্দিষ্ট করেছি, এই ট্রানজিশন দুটি সেকেন্ডে সম্পন্ন হবে।
আপনি যদি CSS ট্রানজিশন সম্পর্কে আরও জানতে আগ্রহী হন, তবে আমাদের CSS transition প্রোপার্টি গাইড পড়ুন।
উপসংহার (Conclusion)
টুলটিপস একটি ওয়েব পেজে অতিরিক্ত তথ্য প্রদর্শন করতে ব্যবহৃত হয়। HTML এবং CSS-এর সাহায্যে, আপনি একটি সৌন্দর্যśীল টুলটিপ এলিমেন্ট ডিজাইন করতে পারেন যা আপনাকে একটি ওয়েব পেজে অতিরিক্ত তথ্য দেখাতে দেয়।
এই টিউটোরিয়ালে, উদাহরণের রেফারেন্স নিয়ে, CSS-এ টুলটিপ কীভাবে তৈরি করতে হয়, এবং আপনার টুলটিপকে একটি লেবেলের বাম, ডান, নিচ, এবং উপরে পজিশন করার পদ্ধতি অন্বেষণ করা হয়েছে। আমরা ফেড-ইন ইফেক্ট কীভাবে তৈরি করতে হয় তা আলোচনা করেছি যা ট্রিগার হয় যখন ব্যবহারকারী একটি টুলটিপ লেবেলের ওপর হোভার করে।
এখন আপনার কাছে পেশাদার ওয়েব ডিজাইনারের মত আপনার নিজস্ব CSS টুলটিপস ডিজাইন করার জ্ঞান রয়েছে!
