CSS টুলটিপ
- পূর্ববর্তী পৃষ্ঠা CSS এনিমেশন
- পরবর্তী পৃষ্ঠা CSS ইমেজ স্টাইল
通过 CSS 创建工具提示（Tooltip）。
演示：工具提示
ইনস্ট্যান্স
当用户将鼠标指针移到元素上时，工具提示通常用于提供关于某内容的额外信息：
基础的工具提示
创建一个鼠标移到元素上时显示的工具提示：
ইনস্ট্যান্স
<style>
/* Tooltip 容器 */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* 如果需要在可悬停文本下面显示点线 */
}
/* Tooltip 文本 */
.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</div>
<span class="tooltiptext">Tooltip text</span>
</div>
উদাহরণ ব্যাখ্যা
HTML：
using the container element (such as <div>) and adding "tooltip" class. When the user hovers over this <div>, the tooltip text is displayed.
The tooltip text is located in class="tooltiptext" of embedded elements (such as <span>)
CSS：
tooltip Class uses position:relativeto place the tooltip text (position:absolute）。Note: For how to place the tooltip, see the examples below.
tooltiptext Class saves the actual tooltip text. By default, it is hidden and becomes visible when the mouse hovers (see below). We also added some basic styles: 120px width, black background, white text, text centered, and 5px top and bottom padding (padding).
CSS border-radius Property is used to add rounded corners to the tooltip text.
When the user moves the mouse over the <div> with class="tooltip",:hover Selector to display the tooltip text.
Positioning the tooltip
In this example, the tooltip is on the right side of the 'hoverable' text (left:105%）。আরও লক্ষ্য করুন，top:-5px to place it in the middle of its container element. We use the number 5 because the top and bottom padding of the tooltip text are both 5px. If you increase its padding, please also increase top প্রোপার্টির মান, যাতে তা কেন্দ্রে থাকে। যদি আপনি টুলটিপটকে বামে রাখতে চান, তবে এটা সমানভাবে প্রযোজ্য
ডান টুলটিপট
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
ফলাফল:
বাম টুলটিপট
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
ফলাফল:
যদি আপনি টুলটিপটটের উপরে বা নীচে থাকতে চান, তবে নীচের উদাহরণ দেখুন। লক্ষ্য করুন, আমরা -60 পিক্সেল সম্প্রসারণ মার্জিন-লেফট প্রোপার্টি ব্যবহার করছি। এটা টুলটিপটকে হলস্টক টেক্সটের মধ্যে কেন্দ্রীভূত করার জন্য, এই মান ১২০ পিক্সেল প্রস্থের অর্ধ (১২০/২ = ৬০)।
শীর্ষ টুলটিপট
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
ফলাফল:
তালা টুলটিপট
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
ফলাফল:
টুলটিপট তীর
যদি আপনি টুলটিপটের নির্দিষ্ট পাশে দেখানো হওয়া তীরকে তৈরি করতে চান, তবে টুলটিপটের পরে 'খালি' কনটেন্ট যোগ করুন এবং প্রোপার্টি ক্লাস ব্যবহার করুন ::after এবং content প্রতিশব্দি। শিংকূটটি স্বতঃস্ফূর্তভাবে হুক দ্বারা তৈরি হয়। এটি টুলটিপটকে বাইবল হিসাবে দেখাবে。
এই উদাহরণ দেখিয়ে দেওয়া হয়েছে কিভাবে টুলটিপটের নিচের দিকে শিংকূট যোগ করা যায়：
নিচের দিকের শিংকূট
.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 এটি শিংকূটের মাপ নির্দেশ করে। আপনি এই সেটিং করলে, তবেও margin-left মানকে একই মান করে রাখুন। এটি শিংকূটকে মধ্যস্থানে রাখবে。
border-color যোগাযোগ করতে ব্যবহৃত কনটেন্টকে শিংকূট হিসাবে ব্যবহার করা। আমরা উপরের হুকের রঙ কালো করেছি এবং অন্যান্যকে স্পষ্ট করেছি। যদি সবগুলো কালো হয়, তবে শেষপর্যন্ত একটি কালো চতুর্ভুজ ফলানো যাবে。
এই উদাহরণ দেখিয়ে দেওয়া হয়েছে কিভাবে টুলটিপটের শীর্ষদিকে শিংকূট যোগ করা যায়। দৃষ্টি দিন, এবার আমরা নিচের হুকের রঙ সমান করেছি:
শীর্ষদিকের শিংকূট
.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 .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;
}
ফলাফল:
এই উদাহরণ দেখিয়ে দেওয়া হয়েছে কিভাবে টুলটিপটের ডানদিকে শিংকূট যোগ করা যায়:
ডানদিকের শিংকূট
.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;
}
ফলাফল:
ফ্লাইট-ইন টুলটিপ (এনিমেশন)
যদি আপনি যেকোনও প্রস্তুত টুলটিপ টেক্সটে ফ্লাইট-ইন ও ফ্লাইট-আউট করতে চান, তবে CSS transition এট্রিবিউট এবং opacity এট্রিবিউট একসঙ্গে ব্যবহার করা হয়, এবং নির্দিষ্ট সেকেন্ড (উদাহরণে 1 সেকেন্ড) ভিত্তিতে সম্পূর্ণভাবে অদৃশ্য থেকে 100% দৃশ্যমান হয়:
ইনস্ট্যান্স
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
- পূর্ববর্তী পৃষ্ঠা CSS এনিমেশন
- পরবর্তী পৃষ্ঠা CSS ইমেজ স্টাইল
