Materialize CSS এর Tooltip একটি জনপ্রিয় এবং কার্যকরী ইউজার ইন্টারফেস উপাদান যা ব্যবহারকারীদের জন্য সহজে কনটেন্ট বা নির্দেশনা প্রদর্শন করতে সাহায্য করে। Tooltip সাধারণত একটি ছোট পপ-আপ টেক্সট হিসেবে প্রদর্শিত হয় যা মূলত কোন বাটন, লিঙ্ক বা আইকনের সাথে সম্পর্কিত থাকে। Materialize CSS এর মাধ্যমে আপনি সহজে tooltip যোগ করতে পারবেন এবং এর animation এবং delay কনফিগার করে আরো কাস্টমাইজ করতে পারবেন।
Tooltip কি?
Tooltip একটি ছোট টেক্সট বক্স যা ইউজারের ইন্টারঅ্যাকশন অনুযায়ী প্রদর্শিত হয়, যেমন মাউস হোভার করা, ক্লিক করা ইত্যাদি। এটি সাধারণত একটি উপাদান বা আইটেমের উপর মাউস হোভার করলে প্রদর্শিত হয় এবং এর মাধ্যমে ব্যবহারকারীদের জন্য অতিরিক্ত তথ্য বা গাইডেন্স প্রদান করা হয়।
Tooltip তৈরি করা
Materialize CSS এ Tooltip তৈরি করতে tooltip ক্লাস ব্যবহার করা হয়। নিচে একটি সাধারণ উদাহরণ দেখানো হলো:
<a class="btn tooltipped" data-tooltip="I am a tooltip" href="#">Hover me!</a>
এখানে:
- tooltipped: এই ক্লাসটি Tooltip এর জন্য প্রয়োজনীয়।
- data-tooltip: এখানে tooltip এর টেক্সট দেওয়া হয়েছে, যা মাউস হোভার করলে প্রদর্শিত হবে।
Tooltip এর জন্য Animation কনফিগার করা
Materialize CSS তে tooltip এর জন্য animation কাস্টমাইজ করা খুবই সহজ। আপনি animation-delay, fade in এবং fade out সহ বিভিন্ন অ্যানিমেশন স্টাইল প্রয়োগ করতে পারেন।
Tooltip Animation উদাহরণ:
<a class="btn tooltipped" data-tooltip="I am a tooltip" data-position="top" data-delay="50" href="#">Hover me!</a>
এখানে:
- data-position: Tooltip এর অবস্থান নির্ধারণ করতে ব্যবহৃত হয়। এটি top, right, bottom, এবং left হতে পারে।
- data-delay: Tooltip প্রদর্শিত হওয়ার আগে সময়ের বিলম্ব (delay) নির্ধারণ করে। এর মান সাধারণত মিলিসেকেন্ডে দেওয়া হয়।
এছাড়া Tooltip এর অ্যানিমেশন এর জন্য CSS ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ:
.tooltip {
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
এখানে:
- fadeIn: এটি একটি কাস্টম অ্যানিমেশন তৈরি করে যা টুলটিপের উপস্থিতি ধীরে ধীরে প্রদর্শন করবে।
Tooltip এর Delay কনফিগার করা
Tooltip delay সেট করার মাধ্যমে আপনি কত সময় পর tooltip দেখানো হবে সেটি কনফিগার করতে পারেন। Materialize CSS তে data-delay অ্যাট্রিবিউট ব্যবহার করে এই বিলম্ব সময় নির্ধারণ করা যায়।
Tooltip with Delay:
<a class="btn tooltipped" data-tooltip="This tooltip has a delay" data-delay="1000" href="#">Hover me!</a>
এখানে:
- data-delay="1000": Tooltip এর প্রদর্শন বিলম্ব ১ সেকেন্ড (1000 মিলিসেকেন্ড)।
Tooltip এর জন্য অন্যান্য কনফিগারেশন
Materialize CSS তে Tooltip এর জন্য কিছু অন্যান্য কনফিগারেশনও রয়েছে, যা আপনাকে Tooltip এর আচরণ কাস্টমাইজ করতে সহায়ক হতে পারে।
Tooltip Positioning:
<a class="btn tooltipped" data-tooltip="Tooltip at top" data-position="top" href="#">Hover me!</a>
<a class="btn tooltipped" data-tooltip="Tooltip at right" data-position="right" href="#">Hover me!</a>
<a class="btn tooltipped" data-tooltip="Tooltip at bottom" data-position="bottom" href="#">Hover me!</a>
<a class="btn tooltipped" data-tooltip="Tooltip at left" data-position="left" href="#">Hover me!</a>
এখানে:
- data-position: Tooltip এর অবস্থান পরিবর্তন করতে ব্যবহৃত হয়। এটি top, right, bottom, এবং left হতে পারে।
Tooltip Trigger Options:
Materialize CSS এর tooltip কে mouseenter বা click ইভেন্ট দ্বারা ট্রিগার করা যায়।
<a class="btn tooltipped" data-tooltip="Tooltip on click" data-position="bottom" data-trigger="click" href="#">Click me!</a>
এখানে:
- data-trigger="click": Tooltip টা শুধুমাত্র ক্লিক করার পর প্রদর্শিত হবে।
উপসংহার
Materialize CSS এর Tooltip ব্যবহার করা খুবই সহজ এবং এটি animation এবং delay এর মাধ্যমে আরও ইন্টারঅ্যাকটিভ এবং কার্যকরী করা যায়। আপনি tooltip এর position, delay, এবং trigger কাস্টমাইজ করে আপনার ওয়েবসাইটে একটি ব্যবহারকারী-বান্ধব এবং আকর্ষণীয় ইন্টারফেস তৈরি করতে পারেন। Tooltip এর মাধ্যমে আপনি অতিরিক্ত তথ্য বা গাইডেন্স প্রদর্শন করতে পারেন, যা ব্যবহারকারীদের জন্য আরো সুবিধাজনক।
Read more
