ایجاد tooltip با استفاده از CSS در طراحی سایت

گاهی مواقع لینک ها ، تصاویر یا بطور کلی عناصری در صفحه وجود دارد که کاملا گویا نیستند و نیاز به توضیحات اضافی برای فهم بیشتر کاربر دارند . تولتیپ یک روش مناسب برای اضافه کردن توضیحات به اینگونه عناصر می باشد که با قرارگرفتن مأوس روی عنصر موردنظر ، توضیحات آن نمایش داده خواهد شد .
با استفاده از CSS و HTML و بدون استفاده از JQuery براحتی می توان در طراحی سایت تولتیپ ایجاد کرد که در ادامه بطور کامل آموزش داده خواهد شد .
ابتدا در فایل HTML یک پاراگراف ایجاد کرده و متن مورد نظر خود را در آن قرار می دهیم .
حال با استفاده از دو تگ span تودرتو قسمت متن تولتیپ و توضیحات را با دو کلاس tooltip و tooltip-text مشخص می کنیم. با استفاده از این خاصیت می توانیم به هر قسمت از متن ویژگی های خاصی را اعمال کنیم .
برای تگ والد کلاس tooltip و برای تگ فرزند کلاس tooltip-text را تعریف می کنیم . در تگ والد قسمتی از متن که خاصیت تولتیپ را برای آن تعریف می کنیم و در تگ فرزند متن توضیحی برای آن متنِ مشخص ، قرار می گیرد .

کدهای CSS زیر را برای کلاس والد Tooltip می نویسیم و استایل موردنظر خود را به آن اعمال می کنیم :
متنی که دارای تولتیپ است باید به نحوی برای کاربر مشخص شود . در اینجا ما یک خط نقطه چین به زیر متن مورد نظر اضافه کردیم . می توان رنگ آن را نیز متمایز از بقیه متن انتخاب کرد و یا آن را با فونت کمی بزرگتر یا توپر نمایش داد .
نشانگر مأوس بر روی متن موردنظر باید دارای خاصیت pointer باشد .
کدهای CSS در طراحی سایت زیر را برای کلاس فرزند tooltip-text به صورت زیر می نویسیم :

سایز فونت تولتیپ را کمی کوچکتر از متن اصلی در نظر می گیریم . و شکل مأوس را به صورت پیش فرض قرار می دهیم همچنین موقعیت و سایز آن را متناسب با صفحه و چیدمان عناصر تنظیم می کنیم .
در این کلاس باید خاصیت display را برابر none قرار دهیم . چرا که ما نمی خواهیم متن تولتیپ در حالت پیش فرض نمایش داده شود . و درون متن اصلی ما قرار داشته باشد .  

خدمات و محصولات صنعتی

 الکتروپمپ