Tooltip হলো একটি ছোট উইন্ডো বা বার্তা, যা ব্যবহারকারীর ক্লিক বা হোভার করার পর দেখানো হয়। এটি সাধারণত কোনও পয়েন্ট, মার্কার বা এলাকা সম্পর্কে অতিরিক্ত তথ্য প্রদর্শন করতে ব্যবহৃত হয়। LeafletJS এ Tooltip তৈরি এবং ব্যবহারের জন্য সহজ এবং সরল পদ্ধতি রয়েছে।
Tooltip তৈরি করা
LeafletJS তে Tooltip তৈরি করতে bindTooltip() মেথড ব্যবহার করা হয়। এটি সাধারণত কোনো লেয়ার বা মার্কারের সাথে যুক্ত থাকে এবং ব্যবহারকারী যখন সেই লেয়ারে হোভার বা ক্লিক করে তখন তা প্রদর্শিত হয়।
উদাহরণ ১: একটি সহজ Tooltip তৈরি করা
// ম্যাপ তৈরি
var map = L.map('map').setView([51.505, -0.09], 13);
// OpenStreetMap টাইল লেয়ার যোগ করা
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// একটি মার্কার তৈরি এবং Tooltip যোগ করা
var marker = L.marker([51.5, -0.09]).addTo(map)
.bindTooltip("এটি একটি Tooltip।")
.openTooltip();
এখানে:
- bindTooltip() মেথড ব্যবহার করে একটি Tooltip যুক্ত করা হয়েছে।
- openTooltip() মেথড দ্বারা Tooltipটি প্রথমে খুলে দেওয়া হয়েছে (যদি আপনি চাচ্ছেন যে এটি ইনিশিয়ালি খোলা থাকবে)।
Tooltip কাস্টমাইজ করা
LeafletJS এ Tooltips কাস্টমাইজ করা খুব সহজ। আপনি Tooltip এর পজিশন, স্টাইল, কনটেন্ট এবং অন্যান্য সেটিংস কাস্টমাইজ করতে পারেন।
উদাহরণ ২: Tooltip এর কাস্টম স্টাইল এবং পজিশন কাস্টমাইজ করা
var marker = L.marker([51.5, -0.09]).addTo(map)
.bindTooltip("এটি একটি কাস্টম Tooltip।", {
permanent: true, // Tooltip স্থায়ী হবে
direction: "top", // Tooltip এর পজিশন
className: "custom-tooltip", // Tooltip এর জন্য কাস্টম ক্লাস
opacity: 0.8 // Tooltip এর স্বচ্ছতা
});
এখানে:
permanent: true: Tooltipটি স্থায়ী হবে এবং এটি মার্কারের উপর থেকে চলে যাবে না।direction: "top": Tooltipটি মার্কারের উপরে প্রদর্শিত হবে।className: "custom-tooltip": Tooltip এর জন্য একটি কাস্টম CSS ক্লাস নির্ধারণ করা হয়েছে।opacity: 0.8: Tooltip এর স্বচ্ছতা কাস্টমাইজ করা হয়েছে।
এখন আপনি CSS দিয়ে custom-tooltip ক্লাসের স্টাইল কাস্টমাইজ করতে পারেন।
.custom-tooltip {
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px;
border-radius: 5px;
}
Tooltip এর কাস্টম HTML কনটেন্ট ব্যবহার করা
Tooltip এর কনটেন্টটি সাধারণত টেক্সট হয়, তবে আপনি চাইলে HTML কনটেন্টও ব্যবহার করতে পারেন। যেমন, আপনি ইমেজ, লিঙ্ক বা অন্যান্য HTML উপাদান Tooltip এর মধ্যে রাখতে পারেন।
উদাহরণ ৩: Tooltip এ HTML কনটেন্ট ব্যবহার করা
var marker = L.marker([51.5, -0.09]).addTo(map)
.bindTooltip('<b>HTML কনটেন্ট:</b> <br><img src="https://example.com/image.jpg" width="100px">')
.openTooltip();
এখানে:
- Tooltip এর মধ্যে HTML কনটেন্ট দেওয়া হয়েছে যেমন ইমেজ এবং টেক্সট।
Tooltip ইভেন্ট হ্যান্ডলিং
LeafletJS তে আপনি Tooltip এর উপর ইভেন্ট হ্যান্ডলিং যোগ করতে পারেন, যেমন mouseover, mouseout, click ইত্যাদি।
উদাহরণ ৪: Tooltip এ ইভেন্ট যোগ করা
var marker = L.marker([51.5, -0.09]).addTo(map)
.bindTooltip("Hover me!", { permanent: false, direction: "top" })
.on('mouseover', function () {
this.openTooltip();
})
.on('mouseout', function () {
this.closeTooltip();
});
এখানে:
- mouseover ইভেন্টে, Tooltip ওপেন করা হয়েছে।
- mouseout ইভেন্টে, Tooltip বন্ধ করা হয়েছে।
Tooltip এর স্থায়ী এবং অনুপস্থিত অবস্থান
Tooltip দুটি প্রধান অবস্থানে থাকতে পারে:
- স্থায়ী (Permanent): Tooltip ম্যাপের মধ্যে স্থায়ীভাবে প্রদর্শিত হবে।
- অনুপস্থিত (Non-Permanent): Tooltip শুধু যখন ব্যবহারকারী মাউস দিয়ে মার্কারের উপর যাবে, তখনই দেখাবে।
উদাহরণ ৫: স্থায়ী Tooltip তৈরি করা
var marker = L.marker([51.5, -0.09]).addTo(map)
.bindTooltip("এটি একটি স্থায়ী Tooltip।", { permanent: true })
.openTooltip();
এখানে:
permanent: trueসেট করে Tooltip স্থায়ী করা হয়েছে।
সারাংশ
LeafletJS এ Tooltip একটি খুবই গুরুত্বপূর্ণ বৈশিষ্ট্য, যা ব্যবহারকারীদের জন্য অতিরিক্ত তথ্য প্রদান করতে ব্যবহৃত হয়। আপনি Tooltip এর কনটেন্ট, পজিশন, স্টাইল এবং ইভেন্ট কাস্টমাইজ করতে পারেন। এটি পয়েন্ট, মার্কার, লাইন, পলিগন বা অন্য যেকোনো লেয়ারের সাথে যুক্ত করা যেতে পারে এবং এটি ইনস্ট্যান্টলি প্রদর্শিত হয় অথবা স্থায়ীভাবে সেট করা যেতে পারে।
Read more
