css only tooltip

Here is the html structure for tooltip

And here is the css styles

/* base CSS element */ .tip { background: #eee; border: 1px solid #ccc; padding: 10px; border-radius: 8px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); position: relative; width: 200px; }

/* arrows - :before and :after */ .tip:before { position: absolute; display: inline-block; border-top: 7px solid transparent; border-right: 7px solid #eee; border-bottom: 7px solid transparent; border-right-color: rgba(0, 0, 0, 0.2); left: -14px; top: 20px; content: ''; }

.tip:after { position: absolute; display: inline-block; border-top: 6px solid transparent; border-right: 6px solid #eee; border-bottom: 6px solid transparent; left: -12px; top: 21px; content: ''; }

Source: http://davidwalsh.name/css...

Need Help with Your Digital Presence?

At Dynamic Web Lab, we specialize in building fast, scalable websites and applications for businesses across the UAE and beyond.

• View our case studies to see recent projects
• Explore our services — from WordPress to Next.js, AI solutions to mobile apps
• Contact us for a free consultation

Whether you need a WordPress website, a custom Next.js application, or AI-powered solutions, our team is ready to help.