Tooltips এবং Dropdowns

Foundation ফ্রেমওয়ার্কের মধ্যে Tooltips এবং Dropdowns দুটি গুরুত্বপূর্ণ ইউজার ইন্টারফেস (UI) কম্পোনেন্ট। এগুলি ওয়েবসাইট বা অ্যাপ্লিকেশনের ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করতে ব্যবহৃত হয়। Foundation এর মাধ্যমে আপনি সহজেই এই কম্পোনেন্টগুলোকে কাস্টমাইজ এবং ব্যবহার করতে পারবেন।

১. Tooltips

Tooltips হল ছোট তথ্য বক্স যা মাউস হোভার বা ফোকাস করার মাধ্যমে প্রদর্শিত হয়। এটি ব্যবহারকারীকে কোন এলিমেন্টের সাথে সম্পর্কিত অতিরিক্ত তথ্য প্রদান করতে ব্যবহৃত হয়।

Tooltips ব্যবহার করার উদাহরণ:

<button class="button" data-tooltip aria-haspopup="true" class="has-tip" title="This is a tooltip!">Hover me!</button>

এখানে:

• data-tooltip: এটি টুলটিপ ফিচারটি সক্রিয় করে।
• title: টুলটিপের কন্টেন্ট যা ব্যবহারকারী মাউস হোভার করলে দেখাবে।
• has-tip: টুলটিপের জন্য Foundation এর CSS ক্লাস।

Tooltips এর বৈশিষ্ট্য:

• Positioning: টুলটিপগুলি বিভিন্ন স্থানে (যেমন: উপরে, নিচে, বামে, ডানে) প্রদর্শিত হতে পারে, যা ব্যবহারকারীকে সবচেয়ে সুবিধাজনক অবস্থানে দেখানোর জন্য কাস্টমাইজ করা যায়।
• Interactive: ব্যবহারকারী যখন মাউস কার্সর নির্দিষ্ট এলিমেন্টের ওপর রাখেন, তখন টুলটিপ প্রদর্শিত হয়।
• Accessibility: টুলটিপকে অ্যাক্সেসযোগ্য করার জন্য aria-haspopup এবং title অ্যাট্রিবিউট ব্যবহার করা হয়।

Tooltips কাস্টমাইজ করা:

<button class="button" data-tooltip aria-haspopup="true" class="has-tip" title="This is a tooltip!" data-position="top">Hover me!</button>

এখানে, data-position="top" এর মাধ্যমে টুলটিপের অবস্থান শীর্ষে পরিবর্তিত করা হয়েছে।

২. Dropdowns

Dropdowns হল একটি ইন্টারঅ্যাকটিভ মেনু যা ব্যবহারকারীকে একাধিক অপশন থেকে একটি নির্বাচন করার সুযোগ দেয়। এটি সাধারণত ফর্ম বা নেভিগেশন মেনুতে ব্যবহৃত হয়, যেখানে কম্প্যাক্টভাবে অনেক অপশন প্রদর্শন করা হয়।

Dropdowns ব্যবহারের উদাহরণ:

<ul class="dropdown menu" data-dropdown-menu>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li class="has-dropdown">
    <a href="#">Services</a>
    <ul class="dropdown menu">
      <li><a href="#">Web Design</a></li>
      <li><a href="#">SEO</a></li>
      <li><a href="#">Marketing</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a></li>
</ul>

এখানে:

• data-dropdown-menu: এটি dropdown মেনুর জন্য Foundation JavaScript সক্রিয় করে।
• has-dropdown: এটি dropdown মেনু আইটেমের জন্য ব্যবহৃত হয়।
• dropdown menu: এটি মেনুর জন্য CSS ক্লাস যা dropdown উপাদান তৈরি করে।

Dropdowns এর বৈশিষ্ট্য:

• Interactive: ব্যবহারকারী যখন মেনু আইটেমের উপর হোভার বা ক্লিক করে, তখন ড্রপডাউন মেনু প্রদর্শিত হয়।
• Nested Dropdowns: ড্রপডাউন মেনুর মধ্যে সাব-ড্রপডাউন মেনু তৈরি করা যায়, যেমন উপরের উদাহরণে Services এর অধীনে আরো সাব-আইটেম রয়েছে।
• Responsive: Foundation এর ড্রপডাউন মেনু স্বয়ংক্রিয়ভাবে বিভিন্ন স্ক্রীন সাইজের জন্য রেসপনসিভভাবে প্রদর্শিত হয়।

Dropdowns কাস্টমাইজ করা:

<ul class="dropdown menu" data-dropdown-menu data-alignment="right">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li class="has-dropdown">
    <a href="#">Services</a>
    <ul class="dropdown menu">
      <li><a href="#">Web Design</a></li>
      <li><a href="#">SEO</a></li>
      <li><a href="#">Marketing</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a></li>
</ul>

এখানে, data-alignment="right" এর মাধ্যমে ড্রপডাউন মেনুর অবস্থান ডান দিকে পরিবর্তিত করা হয়েছে।

Tooltips এবং Dropdowns এর মধ্যে পার্থক্য

Tooltips এবং Dropdowns হল Foundation ফ্রেমওয়ার্কের দুইটি গুরুত্বপূর্ণ ইউজার ইন্টারফেস কম্পোনেন্ট। Tooltips ব্যবহারকারীদের অতিরিক্ত তথ্য প্রদর্শন করতে সহায়তা করে এবং Dropdowns ব্যবহারকারীদের একাধিক অপশন থেকে একটি নির্বাচন করতে সাহায্য করে। Foundation এ এই কম্পোনেন্টগুলো সহজে কাস্টমাইজ করা যায় এবং রেসপনসিভ ডিজাইন নিশ্চিত করা যায়, যা ওয়েবসাইটের ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত করে তোলে।