CSS Tip #7 - CSS Tooltip #shorts

Key Takeaways

now a quick and easy way to make a tooltip using CSS is to make use of the data attribute property in HTML and the attribute function in CSS I'm going to span with a class of tooltip and a dated tooltip attribute with a tooltip message as the value so when I hover over this span I want to see this message in a tooltip in the CSS we're already given the tooltip class a position of relative I'm also going to use the hover pseudo class on the tooltip and then also add on the after sudo to insert some content the content property value is going to be the attribute function which allows us to access the value of any of the tax attributes I'll pass in the data tooltip attribute so now when we hover over the tooltip we should see this extra content after it I'm also just going to paste in some styles to make it look nicer to position the tooltip we use position absolute left at 100 so it says to the right of the span margin left of 10 pixels and also give it a width of 100 pixels and now in a browser when we hover over that span we can see that tool tip awesome