title attribute but unfortunately that cannot be styled.
When looking at new attributes, elements or css properties I head over to mozilla's developer site and I suggest you do the same.
::aftercreates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
attr()CSS function is used to retrieve the value of an attribute of the selected element and use it in the stylesheet. It can also be used on pseudo-elements, in which case the value of the attribute on the pseudo-element's originating element is returned.
The html is quite simple we'll want to put a
span around the word we want the tooltip to be associated with. Also, we are going to add a data attribute called
data-tooltip this attribute will contain the tooltip's text.
When it comes to styling we only care about a couple of things, we want to make
[data-tooltip] look slightly different so the user knows it might do something and we want to style the
[data-tooltip]::after part, I've added a little animation too. We will use
[data-tooltip]:hover::after to know when to make the tooltip appear.
As always I will note, you can style this however you like. I've stuck to the jQuery UI style for this example just so it's a fair comparison but you can do whatever looks good to you.
Well there we have it. I've not posted a blog for a while, almost a year in fact, so I decided to tackle something simple this time. There are a few problems with this method such as it's possible for the tooltip to appear slightly off screen but a tiny amount of JS can fix that, we don't need an entire library.
Thank you for reading ❤️ 🧠 🧠 🦄🦄🦄 🧠 🧠 🧠 🧠 ❤️ ❤️ ❤️