কোন এইচটিএমএল এলিমেন্ট যেমন কোন লেখা বা text অথবা কোন ছবি বা image ইত্যাদির ওপর মাউস এর কার্সর অর্থাৎ mouse hover করলে কোন লেখা বা text প্রদর্শন করে, এটাকেই টুলটিপ বলে। নিচে সিএসএস ব্যবহার করে কয়েকটি সাধারণ টুলটিপ দেখুন।
সিএসএস এর কিছু প্রোপার্টি যেমন - 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 সহ টুলটিপ
সিএসএস এর 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>