create pure simple CSS tooltips

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.

Comments

[James Robb]

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, a button 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...

[Peyton McGinnis]

Make sure to put all your code blocks between backticks. 😅

[antinomaino]

Ok thanks

[Cornea Florin]

nice work!! :D you could also make a codepen and share it in the article so it would be more interactive

[antinomaino]

Ok.thanks