Tooltip এর কনফিগারেশন এবং কাস্টম স্টাইলিং

Tooltip হল একটি ইন্টারঅ্যাকটিভ উপাদান যা ব্যবহারকারীকে একটি নির্দিষ্ট এলিমেন্টের উপরে হভার (mouse hover) করার সময় একটি সহায়ক বার্তা বা তথ্য প্রদর্শন করে। jQueryUI-এর Tooltip উইজেট ব্যবহার করে সহজেই ওয়েব পেজে সহায়ক টিপস বা বার্তা যোগ করা যায়, যা ব্যবহারকারীকে নির্দেশনা দেয় বা অতিরিক্ত তথ্য প্রদান করে।

Tooltip কনফিগারেশন

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>

২. Tooltip ব্যবহার করা

এখন, HTML এর মধ্যে যেকোনো এলিমেন্টে Tooltip যুক্ত করা যাবে। যেমন:

<button title="Click me for more info">Hover me!</button>

এখানে title অ্যাট্রিবিউটটি টুলটিপের কন্টেন্ট হিসেবে কাজ করবে। এর পর jQuery ব্যবহার করে Tooltip সক্রিয় করা যায়:

$(document).ready(function() {
  $(document).tooltip();
});

এই কোডটি সমস্ত title অ্যাট্রিবিউট সহ এলিমেন্টে Tooltip চালু করবে।

Tooltip কনফিগারেশন অপশন

jQueryUI Tooltip উইজেটটি বেশ কিছু কনফিগারেশন অপশন প্রদান করে, যেগুলি ব্যবহার করে আপনি টুলটিপের আচরণ এবং প্রেজেন্টেশন কাস্টমাইজ করতে পারেন।

১. ডিলে কনফিগারেশন (Show/Hide Delay)

Tooltip দেখানোর সময় ডিলে কনফিগার করা যেতে পারে। এটি হোভার করার পর কতটুকু সময় পর Tooltip দেখাবে তা নির্ধারণ করতে সাহায্য করে।

$(document).ready(function() {
  $(document).tooltip({
    show: { effect: "fadeIn", duration: 200 },
    hide: { effect: "fadeOut", duration: 100 }
  });
});

এখানে, show এবং hide প্রপার্টি দিয়ে আপনি Tooltip দেখানোর সময় ফেড ইন এবং ফেড আউট ইফেক্ট যুক্ত করেছেন।

২. Tooltip পজিশন কনফিগারেশন

Tooltip এর অবস্থান কাস্টমাইজ করা যেতে পারে। আপনি সেটি উপরের, নীচে, ডানে বা বামে রাখতে পারেন:

$(document).ready(function() {
  $(document).tooltip({
    position: {
      my: "left top",
      at: "right bottom"
    }
  });
});

এখানে my এবং at প্রপার্টি দিয়ে Tooltip এর অবস্থান নির্ধারণ করা হয়েছে। "left top" এর মানে হলো Tooltip বক্সটি এলিমেন্টের বাম এবং উপরের দিকে থাকবে, এবং "right bottom" এর মানে হলো Tooltip বক্সটি এলিমেন্টের ডান এবং নীচে থাকবে।

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

আপনি টুলটিপের কন্টেন্টও কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, HTML কন্টেন্ট এবং AJAX লোডিং ব্যবহার করা যেতে পারে:

$(document).ready(function() {
  $("#myButton").tooltip({
    content: "This is a custom message!"
  });
});

এখানে content প্রপার্টি দিয়ে আপনি কাস্টম টেক্সট প্রদান করেছেন।

Tooltip এর কাস্টম স্টাইলিং

Tooltip এর ডিজাইন কাস্টমাইজ করা যায় CSS এর মাধ্যমে। আপনি Tooltip এর ব্যাকগ্রাউন্ড, বর্ডার, ফন্ট, প্যাডিং এবং অন্যান্য স্টাইল পরিবর্তন করতে পারেন।

১. Tooltip বর্ডার এবং ব্যাকগ্রাউন্ড পরিবর্তন

.ui-tooltip {
  background: #4CAF50; /* গ্রিন ব্যাকগ্রাউন্ড */
  color: white; /* সাদা টেক্সট */
  border: 2px solid #388E3C; /* গা dark ় সবুজ বর্ডার */
  border-radius: 5px; /* কোণার রেডিয়াস */
  padding: 10px; /* প্যাডিং */
}

এখানে, .ui-tooltip সিলেক্টর ব্যবহার করে Tooltip এর ব্যাকগ্রাউন্ড রঙ, টেক্সট রঙ, বর্ডার এবং প্যাডিং পরিবর্তন করা হয়েছে।

২. Tooltip এর ফন্ট কাস্টমাইজ করা

.ui-tooltip {
  font-family: "Arial", sans-serif;
  font-size: 14px;
}

এখানে Tooltip এর ফন্ট স্টাইল পরিবর্তন করা হয়েছে, যাতে এটি "Arial" ফন্ট ব্যবহার করে এবং ১৪ পিক্সেল ফন্ট সাইজে দেখায়।

৩. Tooltip এর তির্যক কোণ

.ui-tooltip:after {
  content: "";
  position: absolute;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #4CAF50 transparent;
  top: -20px;
  left: 50%;
  margin-left: -10px;
}

এখানে :after সিএসএস সিলেক্টর ব্যবহার করে Tooltip এর নিচে একটি তির্যক কোণ (arrow) যোগ করা হয়েছে।

উপসংহার

Tooltip উইজেট jQueryUI এর একটি কার্যকরী এবং ইন্টারঅ্যাকটিভ উপাদান যা ব্যবহারকারীদের জন্য অতিরিক্ত তথ্য প্রদর্শন করে। এটি কাস্টমাইজযোগ্য এবং একাধিক কনফিগারেশন অপশন সরবরাহ করে, যেমন show, hide, position, এবং content। এছাড়া, আপনি CSS ব্যবহার করে Tooltip এর ডিজাইনও কাস্টমাইজ করতে পারেন, যেমন ব্যাকগ্রাউন্ড রঙ, ফন্ট স্টাইল, বর্ডার এবং তির্যক কোণ। jQueryUI Tooltip উইজেটের মাধ্যমে আপনি আপনার ওয়েবসাইটের ইউজার এক্সপেরিয়েন্স আরও উন্নত করতে পারেন।