How To Make Tooltips With Only CSS

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

you are so cute and thank you so much for explanation ❤❤❤

Thanks!

Its crazy how much work the frontend devs have to do to for such a small component

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

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...

🐐

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.

video is the best it is useful thank you

This was a great tip. Thanks. :)

Why are we selecting both ::before and ::after?

great vids appreciated! would be cool to see a vid of you explaining your background, like when you got into code how long you've been doing it why u did it etc etc. just nice to have the inspiration sometimes to see peoples stories

Hi, can you please make some video on the tooltip card which will work exactly like the google map tooltip card on hovering on the location.

Thanks,

You are very skilled, but this video ended while I don't really know how to implement calc(), and other many other stuff.
Too "DRY" for me.
Thank you nonetheless..

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

It's a nice way for normal dom elements but doesn't work on some other elements that don't have psudo elements like svg elements 😢

you are awsome and a good teacher, thanks

Does work for input text as well?

How do I get the course

Unsure to take your CSS course, as you lost from Kevin. PS kidding

thank you so much bro

You are honestly TALENTED. It literally just flowed into my brain. the way you explained it is just PERFECT. Thanks Man.

it's not simplified

Kyle, I appreciate you man. Thanks for this lesson. I did check your blog post on the CSS triangle. It was really informative and helpful. Big ups to you bro. God bless you. You are doing great. ✌️❤️

Hi good video 👍 but
What is the difference between Tooltip and Hotspot??? 🤔

I would appreciate your answer

For tooltip dynamic positioning, we need javascript right?

You are just Awesome brother :)

I want the same tooltip but on right direction how can I do that?

how to set the position of tooltip right left top or bottom?

do you know why the hover grow animation is bumpy and the uncover shrink animation is smooth? im using safari

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

Come on, I made it with easier way. you're a bit COMPLICATED

It doesn't work when you have to deal with overflow: hidden in parent element. The tooltip gets clipped if the parent has overflow: hidden. If there is a workaround for it. Pls let me know

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

doesn't work
edit:
nvm

Hi Kyle, Do you have already created a video for a tooltip text to be clicked like here the text say "Thinking cat", I want to click on that text and it opens a new window. That's it.

--arrow-size is useless if you would deploy this in a website you would use a .tool-tip class or something like that and not rewrite the css, good video otherwise.

how do I make it individually?

Great video as always, love the way you teach, its awesome. There is one thing to catch and its since the position is absolute the tooltip is shown within its parent and goes behind other elements which is not desirable and as long as I change the position to Fixed it doesn't work. Its appreciated if comment it out

This is wonderful, thank you so much!

this worked but now its ruined the sizing of my image and i cant figure out how to fix it

You are so handsome

what does the
*, *::before, *::after {
box-sizing: border-box;
}
rule do?

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

Thank you so much!

Hi, Kyle, thanks for all the good video's.
I have been trying to do a CSS only Tooltip for a while now. And with each solution on the web, including yours, is that when the tooltip get's to big and go's off screen i see some dark bars at the bottom of the screen.
I love to have the tooltip switch position based on the location where it wants to been shown. Like when the tooltip starts to far to the left (outside the screen) it will always move to the right same for when the width is to large so the tooltip is going outside the screen.
For the vertical positioning, when there is no space on top of the element it should show itself below the element.
I know there are some JS scripts doing that but can it somehow been done in modern CSS ?

This is not working for options in a drop-down :-(