یک tooltip ساده فقط با CSS بسازید که وقتی نشانگر موس روی یک دکمه می‌رود یک متن توضیحی همراه با یک پیکان کوچک به صورت محو شده نمایش دهد.

برای حل این مسأله یک دکمه را درون یک عنصر با position: relative قرار دهید و خود tooltip را به صورت عنصر فرزند با position: absolute تعریف کنید؛ در حالت پیش‌فرض opacity: 0 و transform: translateY(4px) قرار دهید و با قرار گرفتن روی دکمه (با selector مثل .btn:hover .tooltip) مقدار opacity را به 1 و transform را به translateY(0) تغییر دهید و از transition برای ایجاد افکت محو/لغزش استفاده کنید. برای پیکان از ::after یا ::before روی عنصر tooltip بهره ببرید و با borderهای مثلثی یا rotate آن را بسازید، همچنین از white-space: nowrap، padding، border-radius و z-index مناسب استفاده کنید تا ظاهر و خوانایی خوب باشد؛ نکته‌های مفید: والد را relative کنید، tooltip را pointer-events: none بگذارید تا کلیک‌ها دچار مشکل نشود و از transition و ease برای تجربه کاربری نرم‌تر استفاده کنید.