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

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

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