I'm going to show you how to create small but yet powerful css tooltip.these tooltips will only use css hover and focus on buttons,a tags if used to display.the tooltips can be used on elements like button,div,a, as a container for the tip.
I've just updated this article according to viewers suggestions.
now check out the pen that i have made.
See the Pen pure css tooltip by antinomaino (@antinomaino) on CodePen.
i have a challenge,after viewing the tips. use them to create beautiful notification dropdowns,user bar dropdowns,on hover call ajax function and display data on the tips etc.
Top comments (5)
While developing any component you should consider accessibility from the outset. In this case, when you’re making tool tips, you need to have the correct aria roles, states and attributes applied, you will also have to use JavaScript to toggle the aria values, furthermore you need to use semantic markup so instead of a
div
, abutton
is a far better choice as a trigger element. Lastly I’ll add that if you have a:hover
trigger, you also require a:focus
trigger for keyboard users.For more information on accessible tool tips, see here: inclusive-components.design/toolti...
Make sure to put all your code blocks between
backticks
. 😅Ok thanks
nice work!! :D you could also make a codepen and share it in the article so it would be more interactive
Ok.thanks