How To Make Tooltips With Only CSS
ฝัง
- เผยแพร่เมื่อ 30 ก.ย. 2024
- 🚨 IMPORTANT:
Learn CSS Today Course:courses.webdev...
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:
GitHub Code: github.com/Web...
CodePen Code: codepen.io/Web...
CSS Variables Tutorial: • CSS Variables Tutorial
CSS Triangles Blog Post: blog.webdevsim...
🧠 Concepts Covered:
- How to create triangles in CSS
- How to use transform/translate with animations
- Using data attributes in CSS
🌎 Find Me Here:
My Blog: blog.webdevsim...
My Courses: courses.webdev...
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/Web...
CodePen: codepen.io/Web...
#Tooltip #WDS #CSS
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 !!!
I just add a "title" attribute to the HTML and call it a day. 😂
what does the
*, *::before, *::after {
box-sizing: border-box;
}
rule do?
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?
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.
I am sooo satisfied that my tooltip interest completely disappeared...
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
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!
Why are we selecting both ::before and ::after?
🙏🏽thank you! This is such a useful css skill which I’ve never used before!
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
If the tooltip has a lengthy string, then the box scales vertically instead of horizontally. How to fix this?
doesn't work
edit:
nvm
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
Hey, that's awesome. Thanks for sharing!
I learnt a lot of other things, instead of just tooltips.
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..
You are honestly TALENTED. It literally just flowed into my brain. the way you explained it is just PERFECT. Thanks Man.
8:20 this CSS variable support all browsers? I'm confused how to make this variable? it should be from a " :root " right?
A stealth tutorial on the usefulness of CSS variables
When i use image image mapping Tag
CSS is not working
Please Answer
I searched in TH-cam
No one has answers
Wil you simplify me
omg... thank u so much buddy... I subscribed your channel... keep it up... sending you a lots of love...
smart kid, the number of times he types in height and width and then deletes if from the CSS for no reason will make your head spin..
Does anyone know to style text like addding or in data-tooltip? I've read something related to BS.
wow
early
Come on, I made it with easier way. you're a bit COMPLICATED
7:27 I set max width to 100% but my text still overflowing.. can someone tell me why? :(
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,
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.
Cool lesson, but how to insert HTML code inside the data-tooltip attribute to style a multiline tooltip?
Unsure to take your CSS course, as you lost from Kevin. PS kidding
For tooltip dynamic positioning, we need javascript right?
--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.
Its crazy how much work the frontend devs have to do to for such a small component
How to make ngbtooltip iphone nd android compatible based on my requirement of getting that on a single click
do you know why the hover grow animation is bumpy and the uncover shrink animation is smooth? im using safari
Ok fixed my image. But now the tooltip is not showing on hover...
Wow I actually learned something new
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 😢
I’m a little unclear as to how just specifying the top border color of the ::after pseudoelement creates a triangle. Can anyone shed some light on that for me please? :]
Look for css shapes in css tricks, there is a good explanation, it all has to do in how borders works and collide with each other.
Took me a bit to sort that also. Picture a 10px square. If it has, say, 2px borders, they meet at the corners in a 45º angle, right? They don't end as blunt rectangles. Increase the width of the border to 5px, and each border is a little triangle, all four meeting in the center.
Now, increase the width of the borders and they begin to cross over each other, until, at a 10px border, each side is a triangle whose base is one side of your square, and whose other side (the point) is touching the far side of the square. Make the other three borders transparent, and boom.
Hey Kyle, I really enjoyed this one and during this challenge my understanding of some concepts got more clear. Thank you man!!
this worked but now its ruined the sizing of my image and i cant figure out how to fix it
DIOS TE BENDIGA, Gracias por compartir tus conocimientos
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!
wait didn't he say the CSS course is going to be free?
The CSS course was only free for two random people. It was a giveaway.
dude, there is no free lunch, did you get free course at udemy, skillshare, scrimba and plenty of platforms ??? did you get free school education ??? you paid a lot of money to school teachers who mostly don't know how to teach. Kyle is very good at teaching/explaing/illustrating/presenting things it is 100% worth you investing on his courses !!!
@@maskman4821 Kyle explained the missunderstanding, so chill. no need to make a scene of it
I want the same tooltip but on right direction how can I do that?
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!
Hi good video 👍 but
What is the difference between Tooltip and Hotspot??? 🤔
I would appreciate your answer
Omg! I have been waiting for you videos since quarentine.
Hopefully I can make being stuck at home a bit better.
Sorry, this is not much reusable tooltip code and transform is applied for two elements instead whole one tooltip element with arrow which is much better I think. But good example for CSS variables ;-)
For CSS tooltips I would recommend use special element, you can easily make reachable for links inside. For non-blurry text avoid using transform and use margin for spacing (or calc)
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
how to ember a picture on the black mask?
Does work for input text as well?
how do I make it individually?
you are awsome and a good teacher, thanks
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
video is the best it is useful thank you
This is not working for options in a drop-down :-(
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...
You are just Awesome brother :)
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.
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.
I love yor channel, I'm a developer from Argentina, your videos are so usefull to me, thanks!
This was a great tip. Thanks. :)
Didn't know the concept of triangles before. Thank you so much.
✨✨
thnaks bro
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
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.
how to set the position of tooltip right left top or bottom?
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...
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?
See whats happens when a coding-kid enters CSS... Super!
🐐
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. ✌️❤️
CAN I ASK??
attr() is not working!
wow
it's not simplified
thank you so much bro
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
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
How would you fix when the hover area is bigger than the element. In this case, the cat photo?
amazing video
Thank you so much!
You are so handsome
you are so cute and thank you so much for explanation ❤❤❤
How do I get the course
Saved my day😍you're awesome😍😍Thank you ❤️
I love your videos
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.
i just figured using data attributes in css has so many use cases....... thank you very much.
Very cool!
Thanks!
Thank you for this. Can you do a video about plotting data using HTML CSS?
in ::after and ::before % which refers to, is itself or just .tooltip?
What if the tooltip needs to appear sometimes above, sometimes below, or even left or right, depending on where there is free space for it to show? I don't think CSS tooltips can do that. Most JavaScript-based tooltip solutions can handle that very well. For most real-world cases you need such functionality.
I guess you will need to make separate class style and change transform-origin to correct side, and then apply correct class yourself to element or use javascript that check position of x and y of element and apply correct class.
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?
Maybe silly question, but how can I put a a href only on the textbubble?