Kyle is really good at teaching/explain complicated thing, though the tooltip is just a small component, it takes a lot of code to accomplish. Without good teacher's leading most people go for library or framework !!!
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!
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.
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.
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
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.
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
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. ✌️❤️
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, 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 ?
sorry I don't have answer according to your need but you can set overflow: hidden for the body tag at the start of the CSS these will remove the bottom scroll bar
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
Great tutorial. I was working on a tooltip today, but messed up. I'll try again tomorrow with the help of this tutorial. Question relating to Visual Studio Code: how do you get the background to not show your desktop? I set mine to show it, but I don't want it now lol. It's hard to see everything.
This is the best tutorial I've seen in months! Thanks! Will be checking out your course, soon. How can I replicate this for 6 items, though without having to copy all of that over 6 times and give it a new class name?
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...
Great explanation! I was wondering if anyone knows how to do the exact same thing, but with a border or a shadow around the entire tooltip? Other tutorials suggest adding a second triangle for the border using the ::after pseudo-element, but in this tutorial we're already using both the ::before and ::after
I'm new in WebDev and still learning it, so I wonder what is the point of using the tooltip? What's the difference if we do it like e.g. content: attr(data-tooltip), or we just simply do content:'Thinking cat''; (What is the point in using data- attributes if we aren't making carousel for example). Thanks in advance!
Awesome! But, do you know how I can add the property "backdrop-filter" on the tooltip, is this possible ? I would like the blur effect on the background of the text...
Great video, just what I was looking for. One question though. Can the "data-tooltip" attribute only accept text (in this case "Thinking Cat"), or we can also insert HTML tags such as into it?
Hi Kiel.Very good tutorial.But I am encountering one problem here.when I reduce the size of the screen the tooltip moves away from it's central position of the object .I mean it is before when screen enters tablet or mobile pixels.Can you give tip how to figure out this issue.Thanks.
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
can we reference other html element in other element with attribute and use it with js or css, if can how to do it, because i have seen in many websites to do that.
When I have elements underneath the tooltip that have a z-index greater than 0, the tooltip sits underneath the element. Changing the z-index of the tooltip itself doesn't fix this. Any idea why this is happening?
When you look at the bottom bar of VSC you can see that he is using live server. Does the extension throw an error for you or does it just refuse to reload?
Just bought the course - haven't been hyped for something like this in a long time! Great videos, keep it up, Kyle!
Thank you so much! It really means a lot.
Kyle is really good at teaching/explain complicated thing, though the tooltip is just a small component, it takes a lot of code to accomplish. Without good teacher's leading most people go for library or framework !!!
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!
Thank you so much for this, this small feature made my web apps look so much better. Thanks Kyle!!
Hey Kyle, I really enjoyed this one and during this challenge my understanding of some concepts got more clear. Thank you man!!
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.
🙏🏽thank you! This is such a useful css skill which I’ve never used before!
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.
I actually like having control over when I save so I can emphasize specific groups of changes.
No problem that's fine. Thnks a lot for this one. BTW, do you have a discord server? I want to join as much as I can
I do. It is linked in the description.
@@WebDevSimplified Thanks a lot
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.
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
I love yor channel, I'm a developer from Argentina, your videos are so usefull to me, thanks!
you are really awesome mannn, you helped me a lot with my css and your voiiiiccceee is soooo nice, wish you the best
Thank you!
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.
Omg! I have been waiting for you videos since quarentine.
Hopefully I can make being stuck at home a bit better.
Thanks!
No problem!
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
Oh my god, this is incredible! Thank you SO much! No more suffering with trying to code tooltips in JS!
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. ✌️❤️
Would take me weeks to figure out without this tutorial.
Didn't know the concept of triangles before. Thank you so much.
✨✨
I learnt a lot of other things, instead of just tooltips.
A stealth tutorial on the usefulness of CSS variables
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
14:23 there’s still visible 1px gap between them 😂 maybe just move that arrow up few pix, it’s not noticeable on green color
how do i do this?
omg... thank u so much buddy... I subscribed your channel... keep it up... sending you a lots of love...
Awesome tutorial as always dude... It's a buttload of code for a simple tool tip.. but at the end of the day cant argue it's well worth it!.. Ty
This is some intense CSS! WOW!
thanks ..... i was needing this soo much...
This was a great tip. Thanks. :)
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 ?
sorry I don't have answer according to your need
but you can set overflow: hidden for the body tag at the start of the CSS
these will remove the bottom scroll bar
Hey, that's awesome. Thanks for sharing!
you are awsome and a good teacher, thanks
You are just Awesome brother :)
You are just awesome brother 💕💕💕
i just figured using data attributes in css has so many use cases....... thank you very much.
Saved my day😍you're awesome😍😍Thank you ❤️
This is wonderful, thank you so much!
Wow I actually learned something new
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
Does anyone know to style text like addding or in data-tooltip? I've read something related to BS.
Incredible tips, thanks a lot
Thank you! Keep up the good work 👍🏻
Just subbed to your CSS course 👍
Thank you!
Thank you so much!
thanks for the great work!! wish that i won the course.. needed badly
thank you 😀
Thanks kyle for a once again great tutorial
Very helpful video, thank you so much!
Ty bro a lot you save my time :)
Great tutorial. I was working on a tooltip today, but messed up. I'll try again tomorrow with the help of this tutorial.
Question relating to Visual Studio Code: how do you get the background to not show your desktop? I set mine to show it, but I don't want it now lol. It's hard to see everything.
thank you so much bro
Why are we selecting both ::before and ::after?
video is the best it is useful thank you
This is the best tutorial I've seen in months! Thanks! Will be checking out your course, soon. How can I replicate this for 6 items, though without having to copy all of that over 6 times and give it a new class name?
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...
Great explanation! I was wondering if anyone knows how to do the exact same thing, but with a border or a shadow around the entire tooltip? Other tutorials suggest adding a second triangle for the border using the ::after pseudo-element, but in this tutorial we're already using both the ::before and ::after
Add the border on the ::before element?
what does the
*, *::before, *::after {
box-sizing: border-box;
}
rule do?
For tooltip dynamic positioning, we need javascript right?
Great vid, can i use a tooltip also for tables?
I'm new in WebDev and still learning it, so I wonder what is the point of using the tooltip? What's the difference if we do it like e.g. content: attr(data-tooltip), or we just simply do content:'Thinking cat''; (What is the point in using data- attributes if we aren't making carousel for example). Thanks in advance!
Awesome! But, do you know how I can add the property "backdrop-filter" on the tooltip, is this possible ? I would like the blur effect on the background of the text...
Very cool!
8:20 this CSS variable support all browsers? I'm confused how to make this variable? it should be from a " :root " right?
If the tooltip has a lengthy string, then the box scales vertically instead of horizontally. How to fix this?
I just add a "title" attribute to the HTML and call it a day. 😂
Hi Kyle, how to change the tooltip position dynamically (current it is top if i want to show at bottom , left or right)
Same question?
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,
How can you delay the hover though? Rollups shouldn’t display right away.
Does work for input text as well?
Great video, just what I was looking for. One question though. Can the "data-tooltip" attribute only accept text (in this case "Thinking Cat"), or we can also insert HTML tags such as into it?
At 3.43 can you tell why he applied before and after both at a time!
How do you get the arrow to come out of the other sides ?
Hi Kyle. I'm stuck in my tooltip tutorial that I have just followed in your video here. My image does not show up :(. I don't know what happened.
We already sent people to the moon but in 2020 we still need a 15-minute tutorial and a whole bunch of code to make a simple tooltip.
ikr :'(
amazing video
You're a god among men, thanks!
Its crazy how much work the frontend devs have to do to for such a small component
Amazing~
Hi Kiel.Very good tutorial.But I am encountering one problem here.when I reduce the size of the screen the tooltip moves away from it's central position of the object .I mean it is before when screen enters tablet or mobile pixels.Can you give tip how to figure out this issue.Thanks.
do you know why the hover grow animation is bumpy and the uncover shrink animation is smooth? im using safari
how to set the position of tooltip right left top or bottom?
Great video
Cool lesson, but how to insert HTML code inside the data-tooltip attribute to style a multiline tooltip?
in ::after and ::before % which refers to, is itself or just .tooltip?
Does this apply for long text as well?
I love your videos
Hi good video 👍 but
What is the difference between Tooltip and Hotspot??? 🤔
I would appreciate your answer
thnaks bro
Thank you for this. Can you do a video about plotting data using HTML CSS?
7:27 I set max width to 100% but my text still overflowing.. can someone tell me why? :(
May I ask how you get the circle the cat is in?
border-radius should solve that.
DIOS TE BENDIGA, Gracias por compartir tus conocimientos
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
It happens to me that the tooltip shows up when the tooltip itself is hovered. Any clue on how to solve that? Much appreciated!:) Greate tut btw
can we reference other html element in other element with attribute and use it with js or css, if can how to do it, because i have seen in many websites to do that.
I want the same tooltip but on right direction how can I do that?
thanks you
When I have elements underneath the tooltip that have a z-index greater than 0, the tooltip sits underneath the element. Changing the z-index of the tooltip itself doesn't fix this. Any idea why this is happening?
How would you fix when the hover area is bigger than the element. In this case, the cat photo?
Maybe silly question, but how can I put a a href only on the textbubble?
Which extension do you use for the live preview? I used to code with "Live Server" but it never works...
When you look at the bottom bar of VSC you can see that he is using live server. Does the extension throw an error for you or does it just refuse to reload?
@@ScileSc It's been a while so I honestly don't remember what was the issue. I think it just stopped reloading the page with no reason.
can I use the tooltip on the button to display the message