সিএসএস টুলটিপ - Css Tooltip



সিএসএস ব্যবহার করে খুব সহজ ভাবে টুলটিপ তৈরি করা যায়। কোন এলিমেন্টের টেক্সটের উপর মাউস পয়েন্টার নিয়ে গেলে টেক্সট সম্পর্কে অতিরিক্ত কোন তথ্য বা text প্রদর্শিত হয়, তাকেই টুলটিপ বলে। নিচে উদাহরণ দেখুন।

websschool.com

বেসিক টুলটিপ

নিচে একটি সাধারণ টুলটিপ এর উদাহরণ দেখুন।

উদাহরণ

<style>
/* টুলটিপ কন্টেইনার */
.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;
padding: 5px 0;
border-radius: 6px;
/* টুলটিপ টেক্সটেরর অবস্থান নির্ধারণ */
position: absolute;
z-index: 1;
}
/* মাউস হোভারে টুলটিপ টেক্সট প্রদর্শন */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>


এইচটিএমএল কোডের বর্ণনা -
কন্টেইনার এলিমেন্ট হিসেবে <div> এলিমেন্টকে ব্যবহার করা হয়েছে এবং এটাতে "tooltip" ক্লাস যোগ করা হয়েছে। তারপর span এলিমেন্টে class="tooltiptext" ব্যবহার করা হয়েছে এবং টুলটিপ টেক্সট রাখা হয়েছে।

সিএসএস কোডের বর্ণনা -
tooltip ক্লাসটিতে position:relative ব্যবহার করা হয়েছে। কারণ টুলটিপ টেক্সটের অবস্থান নির্ধারণের ক্ষেত্রে position:absolute ব্যবহার করেছি। tooltiptext ক্লাসটির মাধ্যমে টুলটিপ টেক্সটকে হাইড করা হয়েছে এবং টুলটিপ টেক্সটে আরো কিছু স্টাইল করা হয়েছে। class="tooltip" যুক্ত <div> এলিমেন্টে :hover সিলেক্টরটি যোগ করা হয়েছে। এর ফলে <div> এলিমেন্টের উপর মাউস নিয়ে গেলে .tooltiptext ক্লাসের visibility প্রোপার্টির মান visible নির্ধারিত হবে।


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

ডান দিকে

নিচে একটি উদাহরণ দেখুন, যেখানে টুলটিপ টেক্সটকে ডান পাশে প্রদর্শন করার জন্য left প্রপার্টির মান 105% নির্ধারণ করা হয়েছে এবং টুলটিপ টেক্সটকে hovar টেক্সটের মাঝামাঝি দেখানোর জন্য top প্রপার্টির মান -5px নির্ধারণ করা হয়েছে।
যদি টুলটিপ টেক্সটের প্যাডিংয়ের মাত্রা বাড়ানো বা কমানো হয় তবে, top প্রোপার্টিতেও একই মান ব্যবহার করতে হবে। একই মান ব্যবহার না করলে টুলটিপ টেক্সট মাঝামাঝি অবস্থানে থাকবে না।

টুলটিপ টেক্সট কে ডান দিকে প্রদর্শনের জন্য নিচে উদাহরণ দেখুন।

উদাহরণ

.tooltip .tooltiptext {
top: -5px;
left: 105%;
}


বা দিকে

টুলটিপ টেক্সট বা দিকে প্রদর্শনের জন্য right প্রপার্টির মান 105% নির্ধারণ করা হয়েছে। টুলটিপ টেক্সট কে বা দিকে প্রদর্শনের জন্য নিচে একটি উদাহরণ দেখুন।

উদাহরণ

.tooltip .tooltiptext {
top: -5px;
right: 105%;
}


উপর দিকে

নিচে একটি উদাহরণ দেখুন যেখানে টুলটিপ উপর দিকে প্রদর্শন করা হয়েছে। এর জন্য bottom: 100% মান ব্যবহার করা হয়েছে এবং টুলটিপ টেক্সটকে মাঝামাঝি দেখানোর জন্য margin-left: -60px নির্ধারণ করা হয়েছে। -60px ব্যবহার করার কারণ হল টুলটিপ টেক্সটের প্রস্থ 120px, তাই প্রস্থের অর্ধেক নির্ধারণ করা হয়েছে।

এবার যদি টুলটিপ টেক্সটের প্রস্থ 100px নির্ধারণ করা হয়, তবে মার্জিন প্রপার্টির মান নির্ধারণ করতে হবে -50px।

উদাহরণ

.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* টুলটিপ টেক্সটকে মাঝামাঝি দেখানোর জন্য width (120/2=60px) এর অর্ধেক মান নির্ধারণ করা হয়েছে */
}


নীচ দিকে

টুলটিপ টেক্সটকে নিচের দিকে প্রদর্শন করতে হলে bottom: 100% মানের পরিবর্তে top: 100% মান ব্যবহার করতে হবে। নিচে এর উদাহরণ দেখুন।

উদাহরণ

.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* টুলটিপ টেক্সটকে মাঝামাঝি দেখানোর জন্য width (120/2=60px) এর অর্ধেক মান নির্ধারণ করা হয়েছে */
}




টুলটিপ অ্যারো

নীচ দিকে অ্যারো

অল্প কিছু কোড লিখে টুলটিপে অ্যারো তৈরি করা যায়। নিচে একটি উদাহরণ দেখুন।

উদাহরণ

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


ব্যাখ্যা -

উপরের উদাহরণে অ্যারোটি নিচ দিকে রাখার জন্য top প্রপার্টির মান 100% নির্ধারণ করা হয়েছে এবং অ্যারোটিকে মাঝামাঝি অবস্থানে রাখার জন্য left প্রপার্টির মান 50% নির্ধারণ করা হয়েছে। border-width: 5px প্রপার্টি দ্বারা অ্যারোটির আকার নির্ধারণ করা হয়েছে। তারপর এটি মাঝামাঝি রাখার জন্য margin-left: -5px প্রপার্টির মান নির্ধারণ করা হয়েছে।

এখানে একটি বিষয় লক্ষ্য করতে হবে তা হল, উভয় প্রোপার্টির মান সমান হতে হবে, যদি 10px বর্ডার দেয়া হয় তবে, মার্জিনও -10px ব্যবহার করতে হবে। border-color: black transparent transparent transparent; নির্ধারণ করা হয়েছে কারন সব দিকের বর্ডার যদি কালো হত তবে এটি অ্যারো না হয়ে একটি কালো বর্গক্ষেত্র হয়ে যেত।

উপর দিকে অ্যারো

নিচের উদাহরণটি দেখুন যেখানে, উপরের দিকে অ্যারো দেখান হয়েছে। উপরে অ্যারো তৈরি করার জন্য এখানে top: 100% এর পরিবর্তে bottom: 100% ব্যবহার করা হয়েছে। তারপর border-color: transparent transparent black transparent; নির্ধারণ করা হয়েছে অর্থাৎ নিচ দিকের বর্ডারের রঙ নির্ধারণ করা হয়েছে।

উদাহরণ

.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;
}


বা দিকে অ্যারো

নিচের উদাহরণটি দেখুন যেখানে, বা দিকে অ্যারো তৈরি করা হয়েছে। বা দিকে অ্যারো তৈরি করতে top: 50%, right: 100% নির্ধারণ করা হয়েছে এবং border-color: transparent black transparent transparent অর্থাৎ এবার ডান দিকের বর্ডারের রঙ নির্ধারণ করা হয়েছে।

উদাহরণ

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


ডান দিকে অ্যারো

নিচের উদাহরণটি দেখুন যেখানে, ডান দিকে অ্যারো তৈরি করা হয়েছে। এজন্য দিকে top: 50%, left: 100% নির্ধারণ করা হয়েছে এবং border-color: transparent black transparent transparent অর্থাৎ এবার বা দিকের বর্ডারের রঙ নির্ধারণ করা হয়েছে।

উদাহরণ

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




টুলটিপ এনিমেশন

টুলটিপ টেক্সটে এনিমেশন যোগ করার জন্য transition প্রোপার্টি ও opacity প্রোপার্টি ব্যবহার করা যায়। নিচের উদাহরণে টেক্সটের উপর মাউস নিলে টুলটিপ টেক্সট সম্পূর্ন দৃশ্যমান হতে 2 সেকেন্ড সময় নিবে

উদাহরণ

.tooltip .tooltiptext {
opacity: 0;
transition: opacity 2s;
}

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








এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.