آموزش TOOL TIP 2

tooltip چیست؟

tooltip ها به شکل های مختلفی دیده می شوند اما اکثر آن ها کادری مستطیل شکل یا مربع شکل اند که حاوی اطلاعات اضافی در مورد عنصر خاصی می باشند. این دسته از اطلاعات معمولا به صورت توضیحات اضافی هستند که نیازی به حضور آن ها در متن اصلی نیست؛ به طور مثال توضیحاتی در مورد چیزی که اکثر کاربران سایت از آن خبر دارند اما ممکن است عده ی کمی هنوز درباره ی آن اطلاعی نداشته باشند. tooltip ها تنها زمانی نمایش داده می شوند که کاربر روی عنصر خاصی hover کند (موس را روی آن بیاورد).

کدهای HTML: از یک عنصر به عنوان نگهدارنده (مثلا ) استفاده کنید و به آن کلاس tooltip بدهید. حالا زمانی که موس کاربر روی این عنصر () بیاید، متن tooltip نمایش داده می شود. متن tooltip خودمان را نیز باید در یک عنصر از نوع inline (مانند یک ) بنویسیم و به آن کلاس “class=”tooltiptext را بدهیم. کدهای CSS: کلاس tooltip از خاصیت position:relative استفاده می کند تا بتوانیم موقعیت متن tooltip را تنظیم کنید (خاصیت position:absolute). از طرفی کلاس tooltiptext نیز خودِ tooltip را نگه می دارد و در حالت پیش فرض مخفی (hidden) است مگر آنکه hover انجام شود. از طرفی برای آنکه tooltip ما ظاهر بهتری داشته باشد، آن را کمی استایل دهی کرده ایم (اضافه کردن width، اضافه کردن background color سیاه، متن سفید، در مرکز قرار دادن متن (centered) و اضافه کردن padding به اندازه ی 5 پیکسل). همچنین از خاصیت border-radius استفاده کرده ایم تا گوشه های tooltip را گِرد کنیم. در آخر هم از hover: استفاده کرده ایم تا اگر موس روی عنصر با کلاس “class=”tooltip رفت اتفاق خاصی انجام بگیرد. موقعیت دهی tooltip در css در مثال زیر، tooltip را در سمت راست (%left:105) متن اصلی (عنصر) قرار داده ایم. سپس از خاصیت top:-5px نیز استفاده کرده ایم تا آن را دقیقا در وسط عنصر نگهدارنده اش قرار دهیم (دلیل اینکه مقدارش را 5 گذاشته ایم، همان padding است که مقدارش 5 بود). بنابراین اگر مقدار padding را افزایش دادید، باید مقدار top را نیز افزایش دهید تا tooltip ما در وسط باقی بماند. ما در دو مثال زیر دو tooltip داریم که اولی را از راست و دومی را از چپ ایجاد کرده ایم: