Tooltip উইজেট: কাস্টম টুলটিপ তৈরি করা

Tooltip উইজেট jQueryUI-তে একটি কার্যকরী উপাদান যা ব্যবহারকারীদের ইন্টারফেসে তথ্য বা নির্দেশনা প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি সাধারণত কোনো এলিমেন্টের ওপর মাউস হোভার করলে একটি ছোট পপ-আপ উইন্ডো প্রদর্শন করে, যেখানে অতিরিক্ত তথ্য বা বর্ণনা থাকে। jQueryUI ব্যবহার করে আপনি সহজেই কাস্টম টুলটিপ তৈরি করতে পারেন।

Tooltip উইজেট ব্যবহার করার জন্য প্রাথমিক সেটআপ

প্রথমে, jQuery এবং jQueryUI লাইব্রেরি আপনার HTML ফাইলে অন্তর্ভুক্ত করতে হবে। নিচে একটি উদাহরণ দেওয়া হলো:

<!-- jQuery লোড -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- jQueryUI স্টাইল শীট -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

<!-- jQueryUI স্ক্রিপ্ট -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

HTML এলিমেন্ট তৈরি করা

এখন, আপনি একটি এলিমেন্ট তৈরি করবেন যেটির ওপর মাউস হোভার করলে টুলটিপ প্রদর্শিত হবে। উদাহরণস্বরূপ:

<button title="Click me to submit the form">Submit</button>

এখানে, title অ্যাট্রিবিউট দিয়ে একটি ডিফল্ট টুলটিপ তৈরি করা হয়েছে। কিন্তু jQueryUI Tooltip উইজেট ব্যবহার করলে আপনি এই টুলটিপকে কাস্টমাইজ করতে পারবেন।

Tooltip উইজেট প্রয়োগ করা

এখন, jQueryUI Tooltip উইজেটটি প্রয়োগ করতে হবে যাতে আপনার টুলটিপ কাস্টমাইজ করা যায়। নিচে উদাহরণ দেওয়া হলো:

$(document).ready(function() {
  $( document ).tooltip();  // সমস্ত এলিমেন্টের জন্য টুলটিপ অ্যাক্টিভেট করা
});

এটি পুরো পৃষ্ঠার জন্য টুলটিপ সক্রিয় করবে, এবং title অ্যাট্রিবিউটের মাধ্যমে প্রদত্ত টুলটিপ তথ্য স্বয়ংক্রিয়ভাবে প্রদর্শিত হবে।

কাস্টম টুলটিপ তৈরি করা

আপনি চাইলে টুলটিপকে আরও কাস্টমাইজ করতে পারেন। নিচে কিছু কাস্টম টুলটিপ ফিচারের উদাহরণ দেওয়া হলো:

১. টুলটিপ কন্টেন্ট কাস্টমাইজেশন

আপনি টুলটিপের কন্টেন্ট কাস্টমাইজ করতে পারেন, যেমন টুলটিপে HTML কন্টেন্ট ব্যবহার করা:

<button id="tooltipButton">Hover me</button>

$(document).ready(function() {
  $("#tooltipButton").tooltip({
    content: "This is a custom tooltip with <strong>HTML</strong> content!"
  });
});

এখানে, আপনি টুলটিপে HTML কন্টেন্ট ব্যবহার করেছেন (যেমন ট্যাগ)। এর মাধ্যমে আপনি টুলটিপকে আরো আকর্ষণীয় এবং প্রাঞ্জল করতে পারেন।

২. টুলটিপের অবস্থান কাস্টমাইজেশন

আপনি টুলটিপের অবস্থান নিয়ন্ত্রণ করতে পারেন, যেমন এটি উপরে, নিচে, ডান দিকে বা বামে প্রদর্শিত হবে:

$(document).ready(function() {
  $("#tooltipButton").tooltip({
    position: {
      my: "center bottom",
      at: "center top+10"
    }
  });
});

এখানে, position প্রপার্টি দিয়ে আপনি টুলটিপের অবস্থান নির্ধারণ করেছেন। my এবং at প্রপার্টি ব্যবহার করে টুলটিপটি এলিমেন্টের নিচে, একটু উপরে শিফট হবে।

৩. টুলটিপ স্টাইল কাস্টমাইজেশন

আপনি টুলটিপের স্টাইল CSS দিয়ে কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, আপনি টুলটিপের ব্যাকগ্রাউন্ড রঙ, টেক্সট ফন্ট এবং অন্যান্য স্টাইল পরিবর্তন করতে পারেন:

.ui-tooltip {
  background: #333;
  color: white;
  font-size: 14px;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

এখানে, .ui-tooltip ক্লাসের মাধ্যমে টুলটিপের ব্যাকগ্রাউন্ড, টেক্সট রঙ, ফন্ট সাইজ, বর্ডার রেডিয়াস, প্যাডিং এবং শ্যাডো কাস্টমাইজ করা হয়েছে।

৪. অ্যানিমেশন কাস্টমাইজেশন

আপনি টুলটিপের প্রবাহ (ফেড ইন বা স্লাইড ইন) কাস্টমাইজ করতে পারেন:

$(document).ready(function() {
  $("#tooltipButton").tooltip({
    show: {
      effect: "slideDown",
      duration: 400
    },
    hide: {
      effect: "slideUp",
      duration: 400
    }
  });
});

এখানে, আপনি show এবং hide প্রপার্টি ব্যবহার করে টুলটিপের অ্যানিমেশন কাস্টমাইজ করেছেন। যখন আপনি টুলটিপটি দেখবেন তখন এটি স্লাইড ডাউন হবে এবং যখন আপনি মাউস সরিয়ে নেবেন তখন স্লাইড আপ হবে।

Tooltip উইজেটের ইভেন্ট হ্যান্ডলিং

আপনি টুলটিপের উপর বিভিন্ন ইভেন্ট যেমন open, close, বা tooltipcreate ইত্যাদি ব্যবহার করে নির্দিষ্ট কার্যক্রম ট্রিগার করতে পারেন:

$(document).ready(function() {
  $("#tooltipButton").tooltip({
    open: function(event, ui) {
      console.log("Tooltip opened!");
    },
    close: function(event, ui) {
      console.log("Tooltip closed!");
    }
  });
});

এখানে, যখন টুলটিপ খোলা বা বন্ধ হবে, তখন কনসোলে একটি মেসেজ প্রদর্শিত হবে।

উপসংহার

Tooltip উইজেট jQueryUI এর একটি কার্যকরী উপাদান, যা ব্যবহারকারীদের জন্য অতিরিক্ত তথ্য প্রদান করে যখন তারা কোনো এলিমেন্টের ওপর মাউস হোভার করে। jQueryUI Tooltip উইজেটটি কাস্টম টুলটিপ তৈরি করতে সহায়তা করে, যার মাধ্যমে আপনি টুলটিপের কন্টেন্ট, অবস্থান, স্টাইল, অ্যানিমেশন এবং অন্যান্য সেটিংস কাস্টমাইজ করতে পারেন। এটি আপনার ওয়েব পেজে একটি আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব ইন্টারফেস তৈরি করতে সহায়ক।