How To Make Tooltips With Only CSS
HTML-код
- Опубликовано: 30 мар 2020
- 🚨 IMPORTANT:
Learn CSS Today Course:courses.webdevsimplified.com/...
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/WebDevSimplified/C...
CodePen Code: codepen.io/WebDevSimplified/p...
CSS Variables Tutorial: • CSS Variables Tutorial
CSS Triangles Blog Post: blog.webdevsimplified.com/202...
🧠 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.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#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 !!!
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.
Hey Kyle, I really enjoyed this one and during this challenge my understanding of some concepts got more clear. Thank you man!!
🙏🏽thank you! This is such a useful css skill which I’ve never used before!
You are honestly TALENTED. It literally just flowed into my brain. the way you explained it is just PERFECT. Thanks Man.
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!
Oh my god, this is incredible! Thank you SO much! No more suffering with trying to code tooltips in JS!
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.
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. ✌️❤️
Hey, that's awesome. Thanks for sharing!
Didn't know the concept of triangles before. Thank you so much.
✨✨
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
thanks ..... i was needing this soo much...
Thank you! Keep up the good work 👍🏻
This is wonderful, thank you so much!
This is some intense CSS! WOW!
Omg! I have been waiting for you videos since quarentine.
Hopefully I can make being stuck at home a bit better.
This was a great tip. Thanks. :)
Very helpful video, thank you so much!
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
Incredible tips, thanks a lot
omg... thank u so much buddy... I subscribed your channel... keep it up... sending you a lots of love...
Saved my day😍you're awesome😍😍Thank you ❤️
Thanks kyle for a once again great tutorial
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!
I love yor channel, I'm a developer from Argentina, your videos are so usefull to me, thanks!
Wow I actually learned something new
You are just Awesome brother :)
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
thanks for the great work!! wish that i won the course.. needed badly
You are just awesome brother 💕💕💕
Thank you so much!
Ty bro a lot you save my time :)
you are awsome and a good teacher, thanks
I learnt a lot of other things, instead of just tooltips.
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
Would take me weeks to figure out without this tutorial.
I just add a "title" attribute to the HTML and call it a day. 😂
A stealth tutorial on the usefulness of CSS variables
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
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
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
i just figured using data attributes in css has so many use cases....... thank you very much.
thank you so much bro
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.
video is the best it is useful thank you
Just subbed to your CSS course 👍
Thank you!
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...
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?
Great video
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.
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.
Does anyone know to style text like addding or in data-tooltip? I've read something related to BS.
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.
amazing video
You're a god among men, thanks!
Amazing~
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!
Great vid, can i use a tooltip also for tables?
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?
If the tooltip has a lengthy string, then the box scales vertically instead of horizontally. How to fix this?
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 love your videos
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?
Thanks!
No problem!
thanks you
thnaks bro
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?
do you know why the hover grow animation is bumpy and the uncover shrink animation is smooth? im using safari
For tooltip dynamic positioning, we need javascript right?
Does this apply for long text as well?
DIOS TE BENDIGA, Gracias por compartir tus conocimientos
in ::after and ::before % which refers to, is itself or just .tooltip?
what does the
*, *::before, *::after {
box-sizing: border-box;
}
rule do?
Thank you for this. Can you do a video about plotting data using HTML CSS?
8:20 this CSS variable support all browsers? I'm confused how to make this variable? it should be from a " :root " right?
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?
Does work for input text as well?
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 would you fix when the hover area is bigger than the element. In this case, the cat photo?
Why are we selecting both ::before and ::after?
Awesome
how to set the position of tooltip right left top or bottom?
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.
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
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
Cool lesson, but how to insert HTML code inside the data-tooltip attribute to style a multiline tooltip?
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 :'(
I want the same tooltip but on right direction how can I do that?
Its crazy how much work the frontend devs have to do to for such a small component
You're always special
can I use the tooltip on the button to display the message
Haha, I was just thinking about it. I didn't want to use Bootstrap's solution because it requires a separate JS library.
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.
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...
Hi good video 👍 but
What is the difference between Tooltip and Hotspot??? 🤔
I would appreciate your answer
7:27 I set max width to 100% but my text still overflowing.. can someone tell me why? :(
how do I make it individually?
I'm seeing a gap between the triangle and the circle. How can I get rid of it?