ایجاد tooltip با استفاده از CSS در طراحی سایت :گاهی مواقع لینک ها ، تصاویر یا بطور کلی عناصری در صفحه وجود دارد که کاملا گویا نیستند و نیاز به توضیحات اضافی برای فهم بیشتر کاربر دارند . تولتیپ یک روش مناسب برای اضافه کردن توضیحات به اینگونه عناصر می باشد که با قرارگرفتن مأوس روی عنصر موردنظر ، توضیحات آن نمایش داده خواهد شد .
با استفاده از CSS و HTML و بدون استفاده از JQuery براحتی می توان در طراحی سایت تولتیپ ایجاد کرد که در ادامه بطور کامل آموزش داده خواهد شد .
ابتدا در فایل HTML یک پاراگراف ایجاد کرده و متن مورد نظر خود را در آن قرار می دهیم .
حال با استفاده از دو تگ span تودرتو قسمت متن تولتیپ و توضیحات را با دو کلاس tooltip و tooltip-text مشخص می کنیم. با استفاده از این خاصیت می توانیم به هر قسمت از متن ویژگی های خاصی را اعمال کنیم .
برای تگ والد کلاس tooltip و برای تگ فرزند کلاس tooltip-text را تعریف می کنیم . در تگ والد قسمتی از متن که خاصیت تولتیپ را برای آن تعریف می کنیم و در تگ فرزند متن توضیحی برای آن متنِ مشخص ، قرار می گیرد .
کدهای CSS زیر را برای کلاس والد Tooltip می نویسیم و استایل موردنظر خود را به آن اعمال می کنیم :
متنی که دارای تولتیپ است باید به نحوی برای کاربر مشخص شود . در اینجا ما یک خط نقطه چین به زیر متن مورد نظر اضافه کردیم . می توان رنگ آن را نیز متمایز از بقیه متن انتخاب کرد و یا آن را با فونت کمی بزرگتر یا توپر نمایش داد .
نشانگر مأوس بر روی متن موردنظر باید دارای خاصیت pointer باشد .
کدهای CSS در طراحی سایت زیر را برای کلاس فرزند tooltip-text به صورت زیر می نویسیم :
سایز فونت تولتیپ را کمی کوچکتر از متن اصلی در نظر می گیریم . و شکل
مأوس را به صورت پیش فرض قرار می دهیم همچنین موقعیت و سایز آن را متناسب
با صفحه و چیدمان عناصر تنظیم می کنیم .
در این کلاس باید خاصیت display را برابر none قرار دهیم . چرا که ما نمی
خواهیم متن تولتیپ در حالت پیش فرض نمایش داده شود . و درون متن اصلی ما
قرار داشته باشد .
و نهایتا به خاصیت hover کلاس والد کد زیر را اضافه می کنیم :
زمانی که مأوس روی متن ( tooltip) می رود ، متن توضیحات (tooltip-text ) نمایش داده خواهد شد .
نتیجه در مرورگر به صورت زیر خواهد بود :
نکته :
بهتر است تولتیپ کمی بالاتر یا پایین تر از خط اصلی نمایش داده شود .
بنابراین خاصیت position کلاس والد را برابر relative و کلاس فرزند را
برابر absolute قرار می دهیم . در غیر اینصورت تولتیپ در همان خط ظاهر
خواهد شد و محل مابقی عناصر را تغییر خواهد داد و به صورت زیر نمایش داده
خواهد شد .
شما می توانید افکت ها و استایل های زیبا برای تولتیپ ایجاد کرده و از آن برای افزایش کاربرپسندی محتوای خود استفاده کنید .