X

X

X

CSS Tooltip । টুলটিপ


টুলটিপ হচ্ছে কোনো বাটন বা লিংকের উপর মাউস রাখার সময়, যে সাহায্যকারী অল্প নির্দেশনা দেওয়া হয় সেটি। সুতরাং, টুলটিপ হচ্ছে কোনো ইলামেন্টের টাইটেল। সিএসএস দিয়ে আকর্ষণীয় টুলটিপ তৈরি করা যায়।


Basic Tooltip

যখন কোনো ইলামেন্টের উপর মাউস রাখা হয়, এ অবস্থায় একটি বেসিক টুলটিপ তৈরি করে দেখানো হলো:

Code Example

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

উদাহরণের ব্যাখ্যা

HTML)
১। প্রথমে একটি কন্টেইনার ইলামেন্ট তৈরি করুন, আপনি <div> ইলামেন্ট ব্যবহার করতে পারেন। এরপর এতে "tooltip" যুক্ত করুন। যখন এই ইলামেন্টে মাউস হোভার করা হবে, তখন টুলটিপ প্রদর্শিত হবে।

টুলটিপ ইলামেন্টেক একটি ইনলাইনের মাধ্যমে প্রকাশ করা হয় যেমন, <span> দিয়ে। উক্ত ইলামেন্টে class="tooltiptext" যুক্ত করা হয়।

CSS) tooltip class যুক্ত ইলামেন্টে position:relative সেট করা হয়, যাতে টুলটিপ ক্লাসকে ইচ্ছেমত যেকোনো অবস্থানে সঠিকভাবে উপস্থাপণ করা যয়। এবার টুলটিপ টেক্সটধারী ইলামেন্টে (position:absolute) সেট করা হয়।

বি:দ্র: নিচের উদাহরণ দেখুন কিভাবে উক্ত কাজগুলো সঠিকভাবে করা হয়।

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

CSS3 border-radius property এর মাধ্যমে টুলটিপ টেক্সটে বৃত্তাকার বর্ডার সেট করা হয়।

যখন <div> ইলামেন্টটিতে মাউস হোভার করা হয়, তখন :hover selector ব্যবহার করে কাঙ্খিত ইলামেন্টকে টুলটিপ হিসেবে উপস্থাপণ করা হয়।


টুলটিপের অবস্থান নির্ধারণ

এই উদাহরণে টুলটিপটি ইলামেন্টের ডানদিকে উপস্থাপিত হয়, (left:105%) ।

ডানদিকে টুলটিপ

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 105%;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

বামদিকে টুলটিপ উপস্থাপণ:

বামদিকে টুলটিপ

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: -5px;
    right: 105%;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

উপরের দিকে টুলটিপ উপস্থাপণ:

উপরের দিকে টুলটিপ

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: -5px;
    right: 105%;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

নিচের দিকে টুলটিপ উপস্থাপণ:

নিচের দিকে টুলটিপ

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -60px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


টুলটিপ নির্দেশক চিহ্ন

টুলটিপ নির্দেশক চিহ্ন তৈরি করার জন্য একটি “empty” content বিশিষ্ট tooltip ইলামেন্ট তৈরি করা হয়। এটি Pseudo ইলামেন্টও হতে পারে। নিচে Pseudo ইলামেন্ট দিয়ে টুলটিপ নির্দেশক চিহ্ন তৈরি করে দেখানো হলো।

টুলটিপের নিচে একটি দিক নির্দেশক চিহ্ন তৈরি করে দেখানো হলো:

tooltip at arrow

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

উদাহরণের ব্যাখ্যা

top: 100% সেট করার ফলে টুলটিপ নির্দেশক বা দিক নির্দেশক চিহ্ন নিচে উপস্থাপিত হবে এবং left: 50% করার ফলে এটি কেন্দ্র বরাবর উপস্থাপিত হবে।

বি:দ্র: border-width প্রপার্টির মাধ্যমে চিহ্নটির প্রশস্ততা নির্ধারণ করা হয়। এটি পরিবর্তন করলে margin-left এর মানও সেটির সাপেক্ষে পরিবর্তন করতে হবে।

border-color ব্যবহার করে এটিকে একটি তীরচিহ্নে রূপান্তর করা হয়। একারণে উপরের বর্ডারকে কালো, এব বাকি তিনটি বর্ডারকে ট্রান্সপ্যারেন্ট বা স্বচ্ছ করা হয়।

নিচের উদাহরণটিতে দেখানো হলো, টুলটিপে কিভাবে উপরের দিকে চিহ্নটি উপস্থাপণ করা হয়। এক্ষেত্রে নিচের বর্ডারের জন্য দৃশ্যমান রং সেট করতে হবে এবং বাকি তিনটি রং স্বচ্ছ বা Transparent হবে।

tooltip at arrow

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

টুলটিপরে বামদিকে তীরচিহ্ন উপস্থাপণ:

tooltip at arrow

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

টুলটিপরে ডানদিকে তীরচিহ্ন উপস্থাপণ:

tooltip arrow for left tooltip

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent black;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Fade In Tooltip (Animation)

Fade tooltip

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    
    /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
    opacity: 0;
    transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

বি:দ্র: CSS Animation সম্পর্কে বিস্তারিত আমাদের পরবর্তী চ্যাপ্টারগুলো জানতে পারবেন।