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


কোন এইচটিএমএল এলিমেন্ট যেমন কোন লেখা বা text অথবা কোন ছবি বা mage ইত্যাদির ওপর মাউস এর কার্সর অর্থাৎ mouse hover করলে কোন লেখা বা text প্রদর্শন করে, এটাকেই টুলটিপ বলে। নিচে সিএসএস ব্যবহার করে কয়েকটি সাধারণ টুলটিপ দেখুন।

Hover over me Tooltip text
for understanding.




It's a simple Tooltip text about this image.

একটি সাধারণ টুলটিপ

সিএসএস এর কিছু প্রোপার্টি যেমন - position, display, visibility ইত্যাদি ব্যবহার করে খুব সহজ ভাবে টুলটিপ তৈরি করা যায়। কোন এইচটিএমএল এলিমেন্ট বিশেষ করে <p>, <h1>, <h2> ইত্যাদি ট্যাগ ব্যবহার করে প্রদর্শিত কোন লেখা বা text এর উপর মাউস পয়েন্টার নিয়ে গেলে সেই বিসয়টি সম্পর্কে অতিরিক্ত কোন তথ্য বা text প্রদর্শিত করাই টুলটিপ বাবহারের উদ্দেশ্য।

নিচে একটি সাধারণ টুলটিপ তৈরি করার জন্য কোড দেখুন।

উদাহরণ

<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 এলিমেন্ট অর্থাৎ এইচটিএমএল এর <div> ট্যাগ কে ব্যবহার করা হয়েছে এবং এটাতে .tooltip ক্লাস যোগ করা হয়েছে। তারপর span এলিমেন্টে অর্থাৎ <span> ট্যাগের সাথে class="tooltiptext" ব্যবহার করা হয়েছে এবং টুলটিপ এর সময় প্রদর্শিত লেখা বা text রাখা হয়েছে।

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

সিএসএস এর display প্রোপার্টি সম্পর্কে জানতে আমাদের সিএসএস ডিসপ্লে টিউটোরিয়াল ওয়েব পেজটি ব্রাউজ করুন।

সিএসএস এর position প্রোপার্টি সম্পর্কে জানতে আমাদের সিএসএস পজিসন টিউটোরিয়াল ওয়েব পেজটি ব্রাউজ করুন।


অবস্থান নির্ধারণ

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

উদাহরণ

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

কোড এডিটর


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

উদাহরণ

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

কোড এডিটর


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

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

টুলটিপ এর লেখা গুলো অর্থাৎ tooltip কে উপর দিকে প্রদর্শন করার জন্য নিচের সিএসএস স্টাইল কোড গুলো দেখুন।

উদাহরণ

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) এর অর্ধেক মান নির্ধারণ করা হয়েছে */
   }

কোড এডিটর



তীর বা Arrow সহ টুলটিপ

নীচ দিকে তীর বা Arrow সহ টুলটিপ
সিএসএস এর border প্রোপার্টি ব্যবহার করে তীর বা Arrow সহ টুলটিপ তৈরি করা যায়। নিচে সিএসএস স্টাইল কোড গুলো দেখুন, যেখানে নীচ দিকে তীর বা Arrow সহ টুলটিপ তৈরি করা হয়েছে।

উদাহরণ

.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; প্রোপার্টি ও মান ব্যবহার করা হয়েছে কারন সব দিকের বর্ডার যদি কালো হত তবে এটি তীর না হয়ে একটি কালো বর্গক্ষেত্র হয়ে যেত।

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

উপর দিকে তীর বা 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;
   }

কোড এডিটর


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

বা দিকে তীর বা Arrow সহ টুলটিপ তৈরি করার জন্য নিচের সিএসএস স্টাইল কোড গুলো দেখুন।

উদাহরণ

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

কোড এডিটর


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

ডান দিকে তীর বা Arrow সহ টুলটিপ তৈরি করার জন্য নিচের সিএসএস স্টাইল কোড গুলো দেখুন।

উদাহরণ

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

কোড এডিটর



এনিমেশন

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

উদাহরণ

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

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

কোড এডিটর



ছবিতে টুলটিপ

ওয়েব পেযে কোন ছবিতে অর্থাৎ <img /> ট্যাগের সাথে টুলটিপ ব্যবহার করা যায়। নিচে কিছু এইচটিএমএল ও সিএসএস কোড দেখুন, এই কোড গুলো ব্যবহার করে একটি ছবিতে টুলটিপ তৈরি করা হয়েছে।

উদাহরণ

<style>
.toltp{
   box-shadow: 5px 6px 6px #999;
   border:2px solid #888;
   }
   
.tol2{
   position: relative;
   display: inline-block;
   margin: 0 auto;
   }

.tol2 .tooltiptext { 
   visibility: hidden;
   width: 120px;
   background-color: black;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   position: absolute;
   z-index: 1;
   top: -5px;
   left: 110%;
   }
   
.tol2 .tooltiptext::after {
   content: "";
   position: absolute;
   top: 50%;
   right: 100%;
   margin-top: -5px;
   border-width: 5px;
   border-style: solid;
   border-color: transparent tomato transparent transparent;
   }
   
.tol2:hover .tooltiptext {
   visibility: visible;
   opacity: 1;
   background-color:tomato;
   margin-bottom:5px;
   }
</style>

<div class="tol2"><img src="css-tooltip.jpg" class="toltp"/>
  <span class="tooltiptext">It's a simple Tooltip text about this image.</span>
</div>

কোড এডিটর