نمایش یک متن به هنگام بردن موس بر روی یک عنصر از صفحه (نمایش راهنما - Tooltip)، با کلاس های w3-tooltip و w3-text ، در W3.CSS

نمایش راهنما (Tooltip) در وب سایت ها، به این صورت است که وقتی کاربر، موس را بر روی یک عنصر (Element) از صفحه می برد، آنگاه یک متن به وی نمایش داده می شود (روشی برای راهنمایی و نمایش اطلاعات بیشتر به کاربر).

برای این منظور، باید کلاس های w3-tooltip و w3-text را در چارچوب W3.CSS به کار ببریم، به این صورت که کلاس w3-tooltip برای عنصری از صفحه ذکر می شود که می خواهیم هنگام بردن موس بر روی آن، متنی نمایش داده شود و کلاس w3-text برای عنصری ذکر می شود که حاوی آن متنی است که باید به عنوان راهنما (Tooltip) به کاربر نمایش بدهیم.

به عنوان مثال، کد HTML زیر را می نویسیم :

بر اساس کد بالا، در خروجی صفحه، تنها عبارت kelidestan.com نمایش داده می شود، اما هنگامی که کاربر موس را بر روی پاراگراف (تگ p) ببرد، آنگاه عبارت (Welcome to kelidestan website) نیز در کنار عبارت قبلی نمایش داده می شود.

همین کد را در یک مثال کامل ذکر می کنیم :

مثال

کد کامل صفحه HTML :

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید
مثال

کد کامل صفحه HTML :

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید
نویسنده علیرضا گلمکانی
شماره کلید 26368
گزینه ها
به اشتراک گذاری (Share) در شبکه های اجتماعی
نظرات 1 1 0
محمود
۱۴۰۰/۰۳/۳۰
۱۰:۳۰

سلام
آیا با سی اس اس می شود پخش صوت هم داشت یعنی همزمان با رفت موس روی متن صوت هم پخش بشود . اگر امکانش هست کد آن را بنویسید .
متشکرم.

ارسال نظر جدید (بدون نیاز به عضو بودن در وب سایت)

جستجو در کلیدستان، توسط گوگل

جستجو در عنوان کلیدها

دسترسی سریع

کلید
×

شماره کلید


دسته بندی
×

شماره دسته کلید


جستجو
×

جستجو