Create a Custom Tooltip with only CSS - Web Design Tutorial

In this video I'll be showing you how to create a CSS-only custom tooltip. It's super easy to do and of course, requires no JavaScript. I forgot to mention in the video that this is also mobile friendly, so that's a huge bonus :)

Support me on Patreon:

Follow me on Twitter @dcodeyt!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

[mathew]

Like others have said, you're a great teacher. You don't just show what you're doing and then repeat the same information verbally as some people do, you explain how it all works. Keep it up! 👍 As a Brit I'm also liking the Aussie accent. 😊

[borisbosnjak]

Keep doing these kind of videos because you know what you're doing. You explain it perfectly and the video is interesting from second 1 to second -1 ;)

[MrsWeasleyking]

exactly what i needed and you explained very clearly thank you :)

[photoinshot]

As always brilliantly explained, thanks!

[bogdanvlas]

great explanation, best tutorial on tooltips

[DaveTheDeveloper]

You definitely deserve more recognition! Love your vids

[nikhilmwarrier]

Great tutorial, Dom.
I would like to add one thing, though. Give the tooltip element a text-decoration: underline dotted; or something to distinguish it from normal text...

[TomasMisura]

Nice video again. Very useful and i am gonna to use it ....

[yohannabevilacqua]

Era exactamente lo que estaba buscando. Thank you.

[the.crypto.x]

Today I learnt about retrieving attribute values using the attr() function - which I honestly did not know existed in CSS until now. Thanks Man!

[THESAHU]

Will the hover over the pseudo element itself make the tool tip to appear?
i.e if our pointer is a little above the span then as well the tooltip will appear. Any way to stop that?

[alissonpratesperes]

Hey man! It's a nice piece of work. But, how can I add a "background blur" on the tooltip? I'm using a rgba background, but the same "backdrop-filter" that I use on my div, seems not work on the tooltip =/ any idea why ? Thanks ! :)

[RonyAdiSantoso]

How to create it autoshow and hide after few seconds in elementor?

[Barresider]

Thank you for your tutorial it was very useful! You have tried excellently to pass on your knowledge in an understandable way, keep up the good work. One thing I would have however, namely that in my eyes a fixed width is meaningful, but not compellingly necessary. I have set the maximum width to 100%, the width to max-content, left to 50% and transform to -50% and 10px and it works fine. What is your opinion on this? Is this variant not as robust?

[bikramchettri]

Hey bro can you do videos on how to filter using javascript? Like filter using type of car or anything?