ایجاد تولتیپ Tooltip در CSS
خوش اومدین به بیست و پنجمین جلسه از دوره آموزش CSS. توی این جلسه قرار نیست که با ویژگی خاصی آشنا بشیم و یا ابزار جدیدی رو در CSS یاد بگیریم. بلکه قرار هست با استفاده از چیزهایی که تا اینجا یاد گرفتیم، یک ابزار مفید و کارآمد رو تولید کنیم. ما توی این جلسه قصد داریم که تولتیپ Tooltip ایجاد کنیم. تولتیپ در واقع توضیحاتی است که ما برای بخش مشخصی از صفحه وب خودمون به کاربر میدیم. این توضیحات بصورت پیشفرض نمایش داده نمیشه، بلکه زمانی که کاربر موس رو روی یک بخش خاصی میبره، این توضیحات نمایش داده میشه.
ما قبلا در جلسه ایجاد منوی کشویی در CSS، مشابه این کار رو قبلا برای dropdown انجام دادیم. اساس کار مشابه همون موضوع هست ولی نکات و ریزه کاری هایی رو باید بهش اضافه کنیم که شکل مطلوب و موردنظرمون بوجود بیاد. در پایین یک نمونه از تولوتیپ رو میبینید:
نحوه ایجاد تولتیپ در CSS
حالا که با تولتیپ آشنا شدیم وقتش هست که بریم به سراغ نحوه ایجاد تولتیپ در CSS. ما توی این آموزش بصورت کامل و قدم به قدم این کار رو انجام میدیم و با استفاده از مواردی که تا اکنون یاد گرفتیم و استفاده بجا از ویژگی ها، این ابزار رو تولید میکنیم.
ساختار اصلی تولتیپ در CSS
ساختار اصلی تولتیپ در CSS ، همانطور که پیشتر گفتم به این صورت است که شامل دو بخش است. بخش اول توضیحاتی است که قرار است به کاربر نمایش داده شود که در حالت پیشفرض غیرقابل دیدن هست و بخش دوم آن مکانی است که زمانی موس روی اون قرار میگیره، بخش اول(توضیحات) نمایش داده میشه.
قطعه کد زیر رو ببینید:
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.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;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
همونطور که در کد بالا میبینید من یه div با کلاس tooltip دارم که در حقیقت همان قسمتی که وقتی موس روی آن میرود قرار هست که توضیحات نمایش داده بشه و همینطور یه span با کلاس tooltiptext دارم که داخل این div قرار داره. محتویات این span در حقیقت همان توضیحاتی است که در حالت پیشفرض نمایش داده نمیشه و زمانی که موس روی div میره این بخش نمایش داده میشه.
اگه به کدهای CSS این بخش دقت کنید میبینید که کلاس tooltip که به div اختصاص دادیم ویژگی display رو براش با inline-block مقداردهی کردم و برای کلاس tooltiptext که به span اختصاص دادم ویژگی position رو با absolute مقداردهی کردم و visibility اون رو هم با hidden مقداردهی کردم که در حالت پیشفرض دیده نشه. در بخش آخر اومدم و گفتم زمانی که سودو hover برای کلاس tooltip اتفاق افتاد ویژگی visibility کلاس tooltiptext رو با visible مقداردهی کن. پس در نتیجه span من تو این زمان نمایش داده میشه.
نتیجه کد بالا رو میتونید در پایین ببینید:
همونطور که میبینید تولتیپ ما در سمت راست متن اصلی نمایش داده میشه. برای اینکه موقعیت نمایش تولتیپ رو مدیریت کنیم باید بریم به سراغ کلاس tooltiptext که حاوی تولتیپ ما هست و مقداردهی لازم رو انجام بدیم.
با توجه به اینکه ویژگی position کلاس tooltip رو روی relative قرار دادیم و ویژگی position کلاس tooltiptext رو روی absolute قرار دادیم، حالا میتونیم به راحتی با استفاده از ویژگی های top, left, right, bottom موقعیت قرارگیری کلاس tooltiptext رو مدیریت کنیم. اگه بخوایم که تولتیپ ما در سمت چپ نمایش داده باشه کافیه ویژگی های top و right اون رو به شکل زیر تعریف کنیم:
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
در نتیجه خواهیم داشت:
همینطور اگه قصد داشته باشیم که تولتیپ ما در سمت بالا یا پایین نمایش داده بشه باید تغییرات زیر رو اعمال کنیم.
برای قرار گرفتن در بالا:
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
در نتیجه خواهیم داشت:
علت اینکه در این حالت برای کلاس tooltiptext عرض مشخص کردیم این است که بتونیم با استفاده از margin-left با مقدار نصف عرض، اون رو وسط چین کنیم. همینطور ما موقعیت bottom رو روی 100% قرار دادیم که تولتیپ در بالای عبارت اصلی نمایش داده بشه.
اگر قصد داشته باشیم که تولتیپ زیر متن اصلی نمایش داده بشه هم کافیه که بجای اینکه مقدار 100% رو به bottom بدیم، این مقدار رو به top بدیم. به این ترتیب تولتیپ ما زیر متن اصلی نمایش داده میشه.
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
در نتیجه خواهیم داشت:
افزودن فلش به تولتیپ در CSS
برای اینکه تولتیپ ما کامل بشه کافیه که یک فلش مثلثی شکل رو به اون اضافه کنیم که به متن اصلی اشاره کنه. برای این کار میتونیم از سودو المنت ها کمک بگیریم و با استفاده از ویژگی border یک فلش رو ایجاد کنیم.
کد زیر رو ببینید:
.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;
}
در نتیجه خواهیم داشت:
من در اینجا اومدم از سودوالمنت after از کلاس tooltiptext استفاده کردم و برای محتوای اضافه یک border تعریف کردم. این border که 5px عرض داره فقط در سمت بالا رنگ داره و در سه جهت دیگه transparent هست. به همین دلیل شبیه یک مثلث کوچک دیده میشه که مناسب قرارگرفتن در زیر تولتیپ هست.
اگه قصد داشته باشم این فلش کوچک در بالای تولتیپ من قرار بگیره(زمانی که تولتیپ زیر متن اصلی هست) کافیه که علاوه استفاده از ویژگی bottom بجای top ، بیام و اینبار رنگ border رو در پایین روی مقداردهی کنم و ۳ جهت دیگه رو روی transparent تنظیم کنم.
کد زیر نتیجه اعمال این تغییرات میشه:
.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;
}
همینطور که اگه خواستیم این فلش در سمت چپ یا راست نمایش داده بشه، علاوه بر اینکه رنگ قسمت موردنظرمون رو توی border مقداردهی میکنیم و ۳ جهت دیگه رو transparent میکنیم لازم هست که top رو با 50% مقداردهی کنیم و بعد از اون برای قرارگرفتن در راست left رو 100% مقدار دهی کنیم و برای قرارگرفتن در سمت چپ right رو 100% مقداردهی کنیم.
