CSS3 چیست؟
HTML برگرفته از حروف اول عبارت HyperTextMarkupLanguage می باشد و به عنوان یک زبان نشانه گذاری متن ( زبان استاندارد صفحات وب ) می باشد. معمولا در یک صفحه ی موجود بر روی وب مجموعه ای از متن ها، عکس ها، بخش بندی های مختلف وجود دارد، به کمک تگ ها و کدهایی که HTML در اختیارتان قرار می دهد، می توانید یک ساختار مشخص از اطلاعات را در این قسمت ها به وجود آورید و در معرض نمایش بازدیدکنندگان قرار بدهید
کدهای 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 داریم که اولی را از راست و دومی را از چپ ایجاد کرده ایم:
