توضیحات راهنما (Tooltips)
«توضیحِ راهنما (Tooltip)» یک نوشته کمکی است. وقتی روی عنصر می روی، ظاهر می شود. مثل نکته های ریز کنار آیکن ها در اپ ها.
ساخت نمونه پایه Tooltip
یک ظرف «tooltip» بساز. متن راهنما را داخل «tooltiptext» بگذار. سپس با :hover نشانش بده.
.tooltip {\n position: relative;\n display: inline-block;\n border-bottom: 1px dotted black;\n cursor: pointer;\n}\n\n.tooltip .tooltiptext {\n visibility: hidden;\n width: 130px;\n background-color: black;\n color: #ffffff;\n text-align: center;\n padding: 5px 0;\n border-radius: 6px;\n position: absolute;\n z-index: 1;\n}\n\n.tooltip:hover .tooltiptext {\n visibility: visible;\n}\n\n<div class="tooltip">Hover over me\n <span class="tooltiptext">Some tooltip text</span>\n</div>\nچیدمان Tooltip: راست و چپ
با left یا right جای Tooltip را کنار متن تنظیم کن.
.tooltip .tooltiptext {\n top: -5px;\n left: 105%;\n}\n.tooltip .tooltiptext {\n top: -5px;\n right: 105%;\n}\nچیدمان Tooltip: بالا و پایین
برای مرکز شدن، نصفِ عرض را منفی margin بده.
.tooltip .tooltiptext {\n width: 130px;\n bottom: 100%;\n left: 65%;\n margin-left: -65px;\n}\n.tooltip .tooltiptext {\n width: 130px;\n top: 100%;\n left: 50%;\n margin-left: -65px;\n}\nفلش Tooltip با ::after
با pseudo-element «::after» و border، فلش می سازیم. مثل کادر گفت وگو.
.tooltip .tooltiptext::after {\n content: " ";\n position: absolute;\n top: 100%;\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: black transparent transparent transparent;\n}\n.tooltip .tooltiptext::after {\n content: " ";\n position: absolute;\n bottom: 100%;\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: transparent transparent black transparent;\n}\n.tooltip .tooltiptext::after {\n content: " ";\n position: absolute;\n top: 50%;\n right: 100%;\n margin-top: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: transparent black transparent transparent;\n}\n.tooltip .tooltiptext::after {\n content: " ";\n position: absolute;\n top: 50%;\n left: 100%;\n margin-top: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: transparent transparent transparent black;\n}\nافکت محو شدن (Fade-in) با Transition
با «transition (گذار)» سرعت تغییر را تعیین کن. با «opacity» محو کن.
.tooltip .tooltiptext {\n opacity: 0;\n transition: opacity 2s;\n}\n\n.tooltip:hover .tooltiptext {\n opacity: 1;\n}\nمراحل تمرین سریع
- کلاس های tooltip و tooltiptext را بساز.
- نمایش را با :hover از hidden به visible ببر.
- مکان را با top/left/right/bottom تنظیم کن.
- فلش را با ::after و border اضافه کن.
- محو شدن را با opacity و transition بساز.
نکته: اگر padding تغییر کرد، مقادیر top یا margin را دوباره تراز کن.
جمع بندی سریع
- tooltip متن کمکی روی hover نشان می دهد.
- relative برای ظرف، absolute برای متن است.
- با ::after فلش می سازیم.
- با transition محو شدن می دهیم.