Tooltip ব্যবহার এবং কাস্টমাইজ করা

Materialize CSS একটি জনপ্রিয় ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা Tooltip নামক একটি শক্তিশালী ইউজার ইন্টারফেস উপাদান প্রদান করে। Tooltip হল একটি ছোট পপ-আপ বক্স যা একটি আইটেম বা উপাদানের উপর হোভার করলে প্রদর্শিত হয় এবং এর মাধ্যমে আপনি আইটেমটির সম্পর্কে সংক্ষিপ্ত তথ্য প্রদান করতে পারেন। Materialize CSS এ Tooltip খুব সহজেই ব্যবহার করা যায় এবং এটি সম্পূর্ণরূপে কাস্টমাইজযোগ্য।

Tooltip কি?

Tooltip হলো একটি ছোট বক্স বা বুদবুদ যা সাধারণত ইউজার যখন কোনো উপাদানের উপর মাউস রাখে (hover), তখন প্রদর্শিত হয়। এটি সাধারণত প্রাসঙ্গিক তথ্য, নির্দেশনা বা হেল্প টেক্সট হিসেবে ব্যবহৃত হয়।

Materialize CSS এ Tooltip ব্যবহার

Materialize CSS এ Tooltip ব্যবহার করার জন্য কয়েকটি সহজ ধাপ অনুসরণ করতে হয়। এটি ব্যবহার করতে মূলত HTML, CSS, এবং JavaScript এর সমন্বয় প্রয়োজন।

১. Tooltip এর HTML স্ট্রাকচার:

Tooltip তৈরি করতে প্রথমে একটি সাধারণ উপাদান (যেমন একটি বাটন বা লিঙ্ক) নির্বাচন করতে হয় এবং সেই উপাদানের সাথে data-tooltip অ্যাট্রিবিউট যোগ করতে হয়।

<a class="btn tooltipped" data-tooltip="I am a tooltip">Hover me!</a>

এখানে:

• tooltipped ক্লাসটি ব্যবহারকারীকে Tooltip প্রদর্শন করতে সহায়ক।
• data-tooltip অ্যাট্রিবিউটের মাধ্যমে আপনি যে টেক্সটটি Tooltip হিসেবে দেখতে চান তা নির্দিষ্ট করবেন।

২. Tooltip সক্রিয় করা (JavaScript এর মাধ্যমে):

Materialize CSS এ Tooltip চালু করতে আপনাকে JavaScript ব্যবহার করতে হবে। আপনি M.Tooltip.init ফাংশন ব্যবহার করে Tooltip সক্রিয় করতে পারেন।

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.tooltipped');
    var instances = M.Tooltip.init(elems);
  });
</script>

এখানে, .tooltipped ক্লাসের মাধ্যমে সমস্ত Tooltip উপাদানটি নির্বাচন করা হচ্ছে এবং M.Tooltip.init ফাংশনের মাধ্যমে তা সক্রিয় করা হচ্ছে।

Tooltip কাস্টমাইজ করা

Materialize CSS এর Tooltip কাস্টমাইজ করার অনেক উপায় রয়েছে, যেমন অবস্থান, রঙ, সাইজ এবং এনিমেশন। আপনি আপনার প্রয়োজন অনুযায়ী এই বৈশিষ্ট্যগুলিকে পরিবর্তন করতে পারেন।

১. Tooltip এর অবস্থান পরিবর্তন:

Materialize CSS এ Tooltip এর অবস্থান top, right, bottom, অথবা left হতে পারে। আপনি data-position অ্যাট্রিবিউটের মাধ্যমে এই অবস্থান পরিবর্তন করতে পারবেন।

<a class="btn tooltipped" data-tooltip="I am a tooltip" data-position="top">Hover me!</a>

এখানে:

• data-position="top": এটি Tooltip এর অবস্থান শীর্ষে নির্ধারণ করে।

অন্য অবস্থানগুলির জন্য:

• data-position="right"
• data-position="bottom"
• data-position="left"

২. Tooltip এর ধীরগতির এনিমেশন:

Materialize CSS এ আপনি Tooltip এর অ্যানিমেশন স্পিড কাস্টমাইজ করতে পারেন। আপনি data-delay অ্যাট্রিবিউট ব্যবহার করে Tooltip প্রদর্শন হওয়ার আগে কতটুকু সময় দেরি হবে তা নির্ধারণ করতে পারেন।

<a class="btn tooltipped" data-tooltip="I am a tooltip" data-delay="50">Hover me!</a>

এখানে:

• data-delay="50": Tooltip প্রদর্শনের জন্য ৫০ মিলিসেকেন্ড দেরি করবে।

৩. Tooltip এর রঙ পরিবর্তন:

Materialize CSS এ Tooltip এর রঙ পরিবর্তন করা যায়। আপনি class এর মাধ্যমে এই কাস্টমাইজেশন করতে পারবেন। উদাহরণস্বরূপ:

<a class="btn tooltipped red-text" data-tooltip="I am a red tooltip">Hover me!</a>

এখানে:

• red-text: এটি Tooltip টেক্সটের রঙ লাল করবে।

এছাড়া, আপনি background-color এবং text-color এর মতো আরও CSS প্রোপার্টি ব্যবহার করে Tooltip এর স্টাইল কাস্টমাইজ করতে পারেন।

৪. Tooltip এর সাইজ কাস্টমাইজ করা:

Materialize CSS এ Tooltip এর সাইজ কাস্টমাইজ করার জন্য আপনাকে CSS ব্যবহার করতে হবে। আপনি font-size এবং padding প্রোপার্টি পরিবর্তন করে সাইজ বাড়াতে বা কমাতে পারেন।

<style>
  .tooltipped {
    font-size: 18px;
    padding: 10px;
  }
</style>

<a class="btn tooltipped" data-tooltip="I am a larger tooltip">Hover me!</a>

এখানে:

• font-size: Tooltip এর টেক্সট সাইজ বাড়ানো হয়েছে।
• padding: Tooltip এর চারপাশে প্যাডিং বাড়ানো হয়েছে।

Tooltip এর অতিরিক্ত কাস্টমাইজেশন

Materialize CSS এ Tooltip এর অন্যান্য কিছু অতিরিক্ত কাস্টমাইজেশনও করা যায়:

• Arrow Style: Tooltip এর তীরের স্টাইল পরিবর্তন করা যায়।
• Positioning: বিভিন্ন স্ক্রীন সাইজ অনুযায়ী Tooltip এর অবস্থান পরিবর্তন করা যায়।
• Hover/Click Trigger: আপনি Tooltip কে hover এর পরিবর্তে click এর মাধ্যমে trigger করতে পারেন।

<a class="btn tooltipped" data-tooltip="Click me to show tooltip" data-position="right" data-trigger="click">Click me!</a>

এখানে, data-trigger="click" অ্যাট্রিবিউট ব্যবহার করে Tooltip কে click ইভেন্টে trigger করা হয়েছে।

উপসংহার

Materialize CSS এর Tooltip ব্যবহার করে আপনি খুব সহজেই ওয়েবসাইট বা অ্যাপ্লিকেশনে অতিরিক্ত তথ্য, নির্দেশনা, বা সহায়িকা প্রদর্শন করতে পারেন। এটি একটি অত্যন্ত শক্তিশালী এবং কাস্টমাইজযোগ্য উপাদান যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করতে সাহায্য করে। Tooltip এর অবস্থান, সাইজ, রঙ এবং এনিমেশন সবকিছুর কাস্টমাইজেশন সহজেই করা যায়, যা আপনার ডিজাইনকে আরও প্রফেশনাল এবং ইন্টারঅ্যাকটিভ করে তোলে।