با CSS یک دکمه بسازید که هنگام قرار گرفتن ماوس روی آن یک تولتیپ بالای دکمه با افکت محو شدن و یک پیکان مثلثی ظاهر شود و متن تولتیپ از صفت data-tooltip خوانده شود.

با CSS می‌توانید دکمه‌ای بسازید که هنگام قرار گرفتن ماوس تولتیپ بالای دکمه با افکت محو و پیکان مثلثی نمایش دهد و متن تولتیپ از data-tooltip خوانده شود. از position: relative روی دکمه استفاده کنید و ::before را برای جعبه تولتیپ و ::after را برای پیکان مثلثی به کار ببرید تا متن با content: attr(data-tooltip) قرار بگیرد. به‌صورت پیش‌فرض از opacity: 0، visibility: hidden و transform: translateY(6px) استفاده کنید و در حالت hover به opacity: 1، visibility: visible و transform: translateY(0) بروید تا یک انیمیشن نرم ایجاد شود. برای دسترسی‌پذیری، به علاوه به کار بردن :focus و pointer-events: none برای جلوگیری از تداخل ماوس و اضافه کردن border-radius و padding برای ظاهر بهتر پیشنهاد می‌شود.