آموزش ساخت Tooltipدر CSS و HTML

سه شنبه ۶ مهر ۱۳۹۵

آموزش ساخت Tooltipدر CSS و HTMLReviewed by جواد نبوی on Sep 27Rating: 4.0

سلام به همه ی شما دوستان عزیز؛ امروز می خواهیم نحوه ساخت Tooltip در CSS و HTML رو برای شما توضیح بدیم. یعنی چی؟ خب طبیعتا اصلی ترین روش ساخت تولتیپ با استفاده از جی کوئری هست. اما توی این مطلب میخواهیم ساده ترین و سبک ترین روش رو توضیح بدیم تا هم حجم صفحه کمتر بشه و هم انجامش راحت باشه. CSS قابلیتی به اسم hover داره که ما میایم ازش استفاده می کنیم و یک تولتیپ بسیار زیبا و شیک رو میسازیم. با ادامه آموزش ساخت Tooltip در CSS از سایت وب تستر همراه باشید.

آموزش ساخت Tooltip با CSS و HTML

اول پیش نمایش رو در لینک زیر ببینید:

قدم اول ساخت Tooltip: اضافه کردن کد HTML

در قدم اول یک کد html مثل زیر به سند اچ تی ام ال خودتون اضافه کنید:

<div class="tooltip">Hover over me
 <span class="tooltiptext">Tooltip text</span>
</div>

توی این کد اومدیم یک دیو با کلاس tooltip ایجاد کردیم و متنی درونش قرار دادیم. وقتی که موس روی این متن قرار بگیره، عبارت Tooltip text که توی span هست نمایش داده می شه. شما میتونید به جای عبارت Hover over me هر متن دیگه ای قرار بدین. یا هر عکس یا عنصری که دلتون بخواد. به جای عبارت Tooltip text هم میتونید هر چیزی قرار بدید. فقط حواستون باشه که Hover over me مربوط به عنصر اصلی و Tooltip text هم عنصر درون تولتیپ هست.

قدم دوم ساخت Tooltip: اضافه کردن کد CSS

در دومین قدم، میایم کلاس tooltiptext رو که در مرحله قبلی توی اچ تی ام ال ایجاد کرده بودیم رو بهش استایل میدیم. حالا چه استایلی میدیم؟ یادتون هست که گفته بودیم این عنصر خود تولتیپه. پس باید در حالت عادی مخفی باشه و زمانی که موس روی عنصر اصلی قرار گرفت نمایش داده بشه. پس یه visibility: hidden براش تعیین می کنیم. استایل کلی زیر رو به فایل استایل قالبتون اضافه کنید:

/* 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: #555;
 color: #fff;
 text-align: center;
 padding: 5px 0;
 border-radius: 6px;

/* Position the tooltip text */
 position: absolute;
 z-index: 1;
 bottom: 125%;
 left: 50%;
 margin-left: -60px;

/* Fade in tooltip */
 opacity: 0;
 transition: opacity 1s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
 content: "";
 position: absolute;
 top: 100%;
 left: 50%;
 margin-left: -5px;
 border-width: 5px;
 border-style: solid;
 border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
 visibility: visible;
 opacity: 1;
}

من یه توضیح مختصر از کد بالا میدم چون واقعا واضحه دیگه چه اتفاقی افتاده.

اول اومدیم برای کلاس tooltip یه سری خصوصیت کلی و عمومی تعریف کردیم تا عنصر اصلی ما تولتیپ دار هست یه جای ثابت و مشخص توی صفحه پیدا کنه.

بعد اومدیم برای کلاس tooltiptext که درون کلاس tooltip قرار گرفته، خصوصیت visibility رو hidden کردیم تا تولتیپ در حالت عادی نمایش داده نشه. یه سری خصوصیت دیگه مثل رنگ پس زمینه و رنگ متن برای تولتیپ مشخص کردیم که اونا دیگه دست خودتونه میتونید تغییرش بدید.

توی قسمت .tooltip .tooltiptext::after هم یک فلش رو به پایین برای تولتیپ قرار دادیم.

در نهایت اومدیم با استفاده از سلکتور .tooltip:hover .tooltiptext مشخص کردیم که وقتی موس روی عنصری با کلاس tooltiptext درون کلاس tooltip قرار گرفت، تولتیپ نمایش داده بشه.

برای مشاهده پیش نمایش روی لینک زیر کلیک کنید. برای اینکه کدش رو ببینید هم کافیه روی صفحه پیش نمایش راست کلیک کنید و View page source رو بزنید:

“این مقاله ترجمه آزاد وب تستر از مقاله how to create tooltips است.”

تبلیغات

نویسنده (مدیر سایت)

جواد نبوی هستم. حدود 7 سالی میشه در زمینه طراحی وب و گرافیک کار می کنم و بعد از توپ دیزاین، این دومین سایت آموزش طراحی وب و گرافیک هستش که راه انداختم. امیدوارم بتونم برای همه ی شما مفید باشم.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *