Material Design Lite (MDL) গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি একটি ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা সহজে কাস্টমাইজযোগ্য এবং ইন্টারঅ্যাকটিভ ডিজাইন উপাদান প্রদান করে। Tooltip একটি সাধারণ UI উপাদান যা ব্যবহারকারীকে কোনো আইটেমের উপর হোভার করলে একটি ছোট বার্তা প্রদর্শন করে। MDL-এ টুলটিপগুলি সহজে তৈরি এবং কাস্টমাইজ করা যায়। এই টিউটোরিয়ালে আমরা Advanced Tooltip Styling এবং Positioning নিয়ে আলোচনা করব এবং দেখব কিভাবে MDL এর টুলটিপ কম্পোনেন্টকে উন্নত করা যায়।
MDL Tooltip কী?
Tooltip হল একটি ছোট তথ্যবক্স যা কোনো ইন্টারঅ্যাকটিভ উপাদান (যেমন বাটন, লিঙ্ক বা আইকন) এর উপর মাউস হোভার করলে প্রদর্শিত হয়। এটি ব্যবহারকারীদের সেই উপাদানের সাথে সম্পর্কিত অতিরিক্ত তথ্য প্রদান করতে সহায়তা করে। MDL টুলটিপে ব্যবহারকারীকে তথ্য দেওয়ার জন্য এবং টুলটিপের অবস্থান কাস্টমাইজ করার জন্য কিছু গুরুত্বপূর্ণ বৈশিষ্ট্য সরবরাহ করে।
MDL-এ টুলটিপ তৈরি করতে mdl-tooltip ক্লাস ব্যবহার করা হয়। এছাড়া, data-tooltip অ্যাট্রিবিউট ব্যবহার করে টুলটিপের কন্টেন্টও সেট করা যায়।
MDL-এ Basic Tooltip তৈরি করা
MDL ব্যবহার করে একটি সাধারণ টুলটিপ তৈরি করা খুবই সহজ। আপনি mdl-tooltip ক্লাস এবং data-tooltip অ্যাট্রিবিউট ব্যবহার করে এটিকে বাস্তবায়ন করতে পারেন।
উদাহরণ: Basic Tooltip
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" data-tooltip="Click me to take action">
Click Me
</button>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
ব্যাখ্যা:
- data-tooltip: এখানে টুলটিপের কন্টেন্ট নির্ধারণ করা হয়েছে, যা বাটনের উপর মাউস হোভার করার পর প্রদর্শিত হবে।
- mdl-tooltip: MDL এর ক্লাস, যা টুলটিপের স্টাইল এবং ফাংশনালিটি নিয়ন্ত্রণ করে।
এটি একটি সাধারণ টুলটিপ তৈরি করবে, যেখানে Click Me বাটনের উপর মাউস হোভার করলে একটি টুলটিপ প্রদর্শিত হবে।
Advanced Tooltip Styling
MDL-এ টুলটিপ স্টাইলিংকে আরও কাস্টমাইজ করা যেতে পারে, যেমন টুলটিপের রঙ, ফন্ট, প্যাডিং, মার্জিন এবং আরও অনেক কিছু। আপনি CSS ব্যবহার করে টুলটিপের লুক এবং ফিল পরিবর্তন করতে পারবেন।
১. টুলটিপের রঙ এবং ব্যাকগ্রাউন্ড পরিবর্তন করা
.mdl-tooltip {
background-color: #2196F3; /* টুলটিপের ব্যাকগ্রাউন্ড রঙ */
color: white; /* টুলটিপের টেক্সট রঙ */
font-size: 14px; /* টুলটিপের ফন্ট সাইজ */
border-radius: 4px; /* কোণ গোল করা */
padding: 10px; /* টুলটিপের প্যাডিং */
}
এখানে, আমরা টুলটিপের ব্যাকগ্রাউন্ড রঙ #2196F3 (নীল), টেক্সট রঙ সাদা এবং ফন্ট সাইজ ১৪px সেট করেছি।
২. টুলটিপের শ্যাডো এবং ট্রান্সফর্মেশন
.mdl-tooltip {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* শ্যাডো */
transform: translateY(10px); /* টুলটিপের অবস্থান সামান্য নিচে করা */
}
এটি টুলটিপের জন্য shadow এবং transform ব্যবহার করে। শ্যাডো টুলটিপকে আরো উঁচু এবং আধুনিক দেখাবে, এবং transform দ্বারা আপনি টুলটিপের অবস্থান সামান্য নিচে সরাতে পারবেন।
৩. ফন্ট স্টাইল কাস্টমাইজ করা
.mdl-tooltip {
font-family: 'Roboto', sans-serif; /* ফন্ট পরিবর্তন */
font-weight: bold; /* ফন্টের মোটা স্টাইল */
}
এটি টুলটিপে Roboto ফন্ট এবং bold স্টাইল প্রয়োগ করবে।
Tooltip Positioning কাস্টমাইজেশন
MDL টুলটিপের অবস্থান কাস্টমাইজ করা খুবই সহজ। আপনি টুলটিপের অবস্থানকে top, bottom, left, বা right নির্ধারণ করতে পারেন। এছাড়া, আপনি টুলটিপের পজিশন আরও ভালভাবে কাস্টমাইজ করতে CSS এর positioning প্রোপার্টি ব্যবহার করতে পারেন।
১. টুলটিপের পজিশন পরিবর্তন করা
MDL টুলটিপে ডিফল্টভাবে top পজিশন থাকে, তবে আপনি সহজেই টুলটিপের অবস্থান পরিবর্তন করতে পারেন।
উদাহরণ: টুলটিপের পজিশন টপ থেকে বটমে পরিবর্তন করা
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" data-tooltip="Click me to take action" data-tooltip-position="bottom">
Click Me
</button>
এখানে, data-tooltip-position="bottom" ব্যবহার করা হয়েছে, যাতে টুলটিপটি বাটনের নিচে প্রদর্শিত হয়।
২. টুলটিপের পজিশন কাস্টমাইজ করা (CSS ব্যবহার)
.mdl-tooltip {
position: absolute;
bottom: 10px; /* টুলটিপকে বাটনের নিচে ১০px অবস্থানে সরানো */
left: 50%; /* টুলটিপকে বাটনের মধ্যভাগে সেন্টার করা */
transform: translateX(-50%); /* সঠিকভাবে সেন্টার করার জন্য */
}
এখানে, position: absolute ব্যবহার করা হয়েছে, যাতে টুলটিপটি bottombar বা top থেকে কাস্টমাইজ করা যায়।
Tooltip Visibility Control
MDL টুলটিপ সাধারণত মাউস হোভার করার পরই প্রদর্শিত হয়, তবে আপনি চাইলে জাভাস্ক্রিপ্ট ব্যবহার করে টুলটিপের দৃশ্যমানতা (visibility) কন্ট্রোল করতে পারেন।
১. JavaScript দিয়ে Tooltip Visibility Control
document.querySelector('.mdl-button').addEventListener('mouseover', function() {
const tooltip = document.querySelector('.mdl-tooltip');
tooltip.classList.add('is-visible'); // টুলটিপ দেখানোর জন্য
});
document.querySelector('.mdl-button').addEventListener('mouseout', function() {
const tooltip = document.querySelector('.mdl-tooltip');
tooltip.classList.remove('is-visible'); // টুলটিপ লুকানোর জন্য
});
এখানে, mouseover এবং mouseout ইভেন্ট ব্যবহার করে টুলটিপের দৃশ্যমানতা নিয়ন্ত্রণ করা হয়েছে।
সারাংশ
MDL-এ Tooltip একটি শক্তিশালী কম্পোনেন্ট, যা ব্যবহারকারীদের উপাদানের সঙ্গে সম্পর্কিত অতিরিক্ত তথ্য প্রদান করতে সাহায্য করে। MDL ব্যবহার করে আপনি টুলটিপের styling এবং positioning কাস্টমাইজ করতে পারেন, যেমন রঙ, আকার, শ্যাডো, পজিশন, এবং আরও অনেক কিছু। এছাড়া, আপনি JavaScript দিয়ে টুলটিপের দৃশ্যমানতা নিয়ন্ত্রণ করতে পারেন। Tooltip positioning এবং advanced styling ব্যবহার করে আপনি টুলটিপকে আপনার ওয়েবসাইটের ডিজাইনের সাথে মানানসই করতে পারবেন এবং ব্যবহারকারী অভিজ্ঞতা উন্নত করতে পারবেন।
Read more
