How To Make Tooltips With Only CSS

🚨 IMPORTANT:

Tooltips are practically essential to any web site now, but making them can be pretty complex. You may think you either need to write a bunch of JavaScript or turn to a complex tooltip library, but with just plain CSS you can create really interesting animated tooltips. In this video I walk through the exact steps needed in order to create highly customizable CSS only tooltips that can have dynamic and custom content in them.

📚 Materials/References:

🧠 Concepts Covered:

- How to create triangles in CSS
- How to use transform/translate with animations
- Using data attributes in CSS

🌎 Find Me Here:

#Tooltip #WDS #CSS

[BribedStudios]

Just bought the course - haven't been hyped for something like this in a long time! Great videos, keep it up, Kyle!

[mirkoat]

Thank you so much for this, this small feature made my web apps look so much better. Thanks Kyle!!

[david]

Well, yes. But add detection of when there is no room to show the tool tip north of the trigger, and display it south. While it can't be done in CSS (because there is no selector for "not all of this rectangle is visible", the challenge is to do it with a minimal amount of JavaScript code.

[董宜璇]

🙏🏽thank you! This is such a useful css skill which I’ve never used before!

[thatoneuser]

Oh cool, was just learning about CSS variables and was wondering why you'd use them, but the end of the video is a great example of why. Thanks as always!

[aayush]

Didn't know the concept of triangles before. Thank you so much.
✨✨

[fedjioraymond]

Thanks very much, what if you want to set the direction of the tooltip, cos sometime it goes out of the screen considering the fact that the div is at the top of the screen

[MaxProgramming]

Thank you so much sir. Needed it. One suggestion. You can enable autosave from File>Autosave to see the live preview faster and avoid saving.

[leandrolobo]

I love yor channel, I'm a developer from Argentina, your videos are so usefull to me, thanks!

[Ed]

Very informative and what's more: straight to the point, which iscrare on youtube nowadays.
Probably no coincidence the ads interrupting this video are from Whiskas

[rudi-batubara]

Tooltip flow clue: 1. Create a tooltip wrapper by fragment, so we do add addition element on it, 2. initialize a child component thought cloneElement and attach a ref on it, 3. add a tooltip element with a forward ref and add it to wrapper by a portal, attatch a mouse and leave event handler to any child element thougt clone element same as we did before for ref on child component, 4. Get bounds of child component X and Y coordinate, passing this coordinate to tooltips component thought style attribute. 5. End...

[BehruzbekOtayev]

i just figured using data attributes in css has so many use thank you very much.

[conaxlearn]

Would take me weeks to figure out without this tutorial.

[rajesh]

Hey Kyle, I really enjoyed this one and during this challenge my understanding of some concepts got more clear. Thank you man!!

[ScileSc]

Good job as always. This is exactly what I did a week ago. One tip: You can also select elements by attribute in css, so you can slap the attribute on pretty much every non self closing element and it just works.

[abdolahkeshtkar]

you are really awesome mannn, you helped me a lot with my css and your voiiiiccceee is soooo nice, wish you the best

[paulofernando]

Does anyone know to style text like addding <b> or <br> in data-tooltip? I've read something related to BS.

[joeldcanfield_spinhead]

Excellent. This is what you can do with deep knowledge of the inner workings of CSS. Yes, it's a lot of code, but each bit is doing something, and understanding each bit gives you another tool you can use somewhere else.

Took me a bit to figure out the border triangle. I was thinking rotation, but if you don't have to, less is better.

[lumenwrites]

Oh my god, this is incredible! Thank you SO much! No more suffering with trying to code tooltips in JS!

[sablesoul]

A stealth tutorial on the usefulness of CSS variables