ب

برای ساخت Tooltip معمولا از  جی کوئری به عنوان اصلی ترین روش استفاده می شود. اما به غیر از این روش، روش های ساده تر و سبک تری نیز وجود دارد می توان از آن ها برای ساخت Tooltip استفاده کرد. این روش ها با استفاده از  CSS و HTML انجام می شود. با استفاده از این ۲ زبان برنامه نویسی به راحتی می توان یک Tooltip بسیار شیک و زیبا نوشت. علاوه بر این با این کار حجم صفحه ی شما نیز کاهش پیدا می کند. در این مطلب نیز قصد داریم تا نحوه ی ساخت Tooltip در  CSS و HTML را آموزش دهیم.

ساخت Tooltip

ابتدا لازم است برای درک بهتر پیش نمایش را در لینک زیر ببینید:

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

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

Hover over me Tooltip text

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

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

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

در ادامه برای درک بهتر یک توضیح مختصر از کد بالا در اختیار شما قرار داده ایم.

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

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

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

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

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

جمع بندی

با استفاده از کد های  CSS و HTML برای ساخت Tooltip به راحتی می توانید با حجم بسیار کم از امکانات آن در صفحه ی سایت خود استفاده کنید. همانطور که آموزش را مشاهده کردید، انجام این کار بسیار ساده است. علاوه بر این به سرعت نیز انجام می شود و در دسترس شما قرار می گیرد تا بتوانید محتواهای خود را با این روش به نمایش در بیاورید.