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>
例子解释
HTML：
使用容器元素（例如
"tooltip" ਕਲਾਸ 'tooltip'। ਜਦੋਂ ਯੂਜ਼ਰ ਮਾਉਸ ਨੂੰ ਇਸ <div> 'ਤੇ ਲਿਆਉਂਦਾ ਹੈ, ਤਾਂ ਟੂਲਟਿੱਪ ਟੈਕਸਟ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ。
ਟੂਲਟਿੱਪ ਟੈਕਸਟ ਹੈ class="tooltiptext" ਵਿੱਚ ਸ਼ਾਮਲ ਐਲਮੈਂਟ (ਜਿਵੇਂ <span>) ਵਿੱਚ
CSS:
tooltip ਕਲਾਸ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ position:relativeਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਕਿਉਂਕਿ ਟੂਲਟਿੱਪ ਟੈਕਸਟ ਨੂੰ ਸਥਾਨਿਕਰਨ ਕਰੇposition:absolute）。ਧਿਆਨ ਦੇਓ: ਟੂਲਟਿੱਪ ਦਾ ਸਥਾਨ ਲਈ ਹੇਠਲੇ ਉਦਾਹਰਣ ਨੂੰ ਦੇਖੋ。
tooltiptext ਕਲਾਸ ਨੂੰ ਇੱਕੋ ਜਿਹਾ ਟੂਲਟਿੱਪ ਟੈਕਸਟ ਸੰਭਾਲਦੀ ਹੈ। ਮੂਲ ਤੌਰ 'ਤੇ ਇਹ ਛੁਪਾਹੀ ਹੁੰਦੀ ਹੈ ਅਤੇ ਮਾਉਸ ਹੋਵਰ ਕਰਨ 'ਤੇ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ (ਹੇਠਲੇ ਵੇਖੋ)। ਅਸੀਂ ਇਸ ਨੂੰ ਕੁਝ ਬੁਨਿਆਦੀ ਸਟਾਈਲ ਵੀ ਜੋੜੇ ਹਨ: 120 ਪਿਕਸਲ ਚੌਡਾਈ, ਕਾਲਾ ਪਿੱਛੋਕਾਰ, ਸਫੇਦ ਟੈਕਸਟ, ਟੈਕਸਟ ਮੱਧਮਿਕ ਅਤੇ 5 ਪਿਕਸਲ ਉੱਪਰ-ਨੀਚੇ ਅੰਦਰੂਨੀ ਬੰਦੂਕਾਂ (padding)。
CSS border-radius ਪ੍ਰਾਪਰਟੀ ਨੂੰ ਟੂਲਟਿੱਪ ਟੈਕਸਟ ਨੂੰ ਗੋਲਾਕਾਰ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。
ਜਦੋਂ ਯੂਜ਼ਰ ਮਾਉਸ ਨੂੰ class="tooltip" ਦੇ <div> 'ਤੇ ਲਿਆਉਂਦਾ ਹੈ:hover ਚੋਣਕਰਤਾ ਟੂਲਟਿੱਪ ਟੈਕਸਟ ਦਿਖਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。
ਟੂਲਟਿੱਪ ਸਥਾਨਿਕਰਨ
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਟੂਲਟਿੱਪ 'ਹੋਵਰ' ਟੈਕਸਟ ('<div>') ਦੇ ਰਾਇਟ ਵਿੱਚ ਹੈleft:105%）。ਇਸ ਵਿੱਚ ਹੋਰ ਵੀ ਧਿਆਨ ਦੇਓtop:-5px ਇਸ ਨੂੰ ਆਪਣੇ ਕੰਟੇਨਰ ਐਲਮੈਂਟ ਦੇ ਮੱਧਮਿਕ ਵਿੱਚ ਰੱਖਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਅਸੀਂ ਸੰਖਿਆ 5 ਵਰਤੀ ਹੈ ਕਿਉਂਕਿ ਟੂਲਟਿੱਪ ਟੈਕਸਟ ਦੀਆਂ ਉੱਪਰ-ਨੀਚੇ ਅੰਦਰੂਨੀ ਬੰਦੂਕਾਂ (padding) 5 ਪਿਕਸਲ ਹਨ। ਜੇਕਰ ਤੁਸੀਂ ਇਸ ਦੀਆਂ ਅੰਦਰੂਨੀ ਬੰਦੂਕਾਂ ਵਧਾਉਣੀ ਹੈ, ਤਾਂ ਉਨ੍ਹਾਂ ਨੂੰ ਵੀ ਵਧਾਓ top ਪ੍ਰਾਪਰਟੀ ਦਾ ਮੁੱਲ ਨੂੰ ਯਕੀਨੀ ਬਣਾਓ ਤਾਂ ਇਹ ਮੱਧਮਿਕ ਰਹੇ। ਜੇਕਰ ਤੁਸੀਂ ਟੂਲਟਿੱਪ ਨੂੰ ਲੈਫਟ ਵਿੱਚ ਰੱਖਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਹ ਵੀ ਲਾਗੂ ਹੋਵੇਗਾ。
ਰਾਇਟ ਟੂਲਟਿੱਪ
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
نتیجہ:
ਲੈਫਟ ਟੂਲਟਿੱਪ
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
نتیجہ:
ਜੇਕਰ ਤੁਸੀਂ ਟੂਲਟਿੱਪ ਉੱਪਰ ਜਾਂ ਨੀਚੇ ਰੱਖਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਹੇਠਲੇ ਉਦਾਹਰਣ ਨੂੰ ਦੇਖੋ। ਧਿਆਨ ਦੇਓ ਕਿ ਅਸੀਂ -60 ਪਿਕਸਲ ਲੈਫਟ ਮਾਰਜਿਨ ਪ੍ਰਾਪਰਟੀ (margin-left) ਵਰਤੀ ਹੈ। ਇਹ ਟੂਲਟਿੱਪ ਨੂੰ ਹੋਵਰ ਟੈਕਸਟ ਨਾਲ ਮੱਧਮਿਕਾਂ ਦੀ ਤਰ੍ਹਾਂ ਕਰਨ ਲਈ ਹੈ। ਇਹ ਮੁੱਲ ਟੂਲਟਿੱਪ ਦੀ ਚੌਡਾਈ ਦਾ ਅੱਧਾ (120/2 = 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 تصویر کا استایل
