نمایش یک متن به هنگام بردن موس بر روی یک عنصر از صفحه (نمایش راهنما - 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) نیز در کنار عبارت قبلی نمایش داده می شود.

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