Custom Tooltip Component
Home
Snippets
Custom Tooltip Component
HTML
CSS
JS
<div class="tooltip"> Hover Me <span class="tooltip-text">This is a custom tooltip with smooth animation!</span> </div>
body { height: 100vh; margin: 0; font-family: Arial, sans-serif; background: #f4f6f8; display: flex; justify-content: center; align-items: center; } .tooltip { position: relative; display: inline-block; cursor: pointer; background: #905b00; color: #fff; padding: 12px 18px; border-radius: 8px; font-size: 16px; } .tooltip .tooltip-text { visibility: hidden; opacity: 0; width: 180px; background: #333; color: #fff; text-align: center; padding: 8px; border-radius: 6px; position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%); transition: opacity 0.3s; font-size: 14px; } .tooltip .tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 6px; border-style: solid; border-color: #333 transparent transparent transparent; } .tooltip:hover .tooltip-text { visibility: visible; opacity: 1; }
//javascript
Ad #1
Ad #2
Scroll to Top