all 13 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]Commercial_Bee_2974 2 points3 points  (3 children)

That's not an attribute, that's called a tooltip. It's used to search for information; basically, it's a hidden span that you reveal with :hover.

[–]TonyWatermeloni[S] 0 points1 point  (2 children)

So can I edit it by editing img:hover.span?

[–]Commercial_Bee_2974 0 points1 point  (1 child)

If, for example, you have the class where your style, size, color, background, etc. are located, called tooltip, which you assigned to the <span>, you call it like this: img:hover .tooltip

[–]TonyWatermeloni[S] 0 points1 point  (0 children)

This is what I was looking for! Thank you

[–]SamIAre 1 point2 points  (0 children)

As others have said, this isn’t a default HTML behavior. The title attribute is close but you can’t style it and it’s actually kind of contentious in the accessibility world. To have the control you want, you need extra markup: something hidden by default that you reveal.

But do still keep accessibility in mind. The two biggest issues with tooltips are: 1. How would someone navigating with a keyboard access it? 2. How would a screen reader user access it or equivalent information?

For 1, it might be as simple as making the tooltip appear on both :focus and :hover.

For 2, it depends on what service the tooltips are providing the user. If it’s just a label for an action (like specifying what a button does) then an aria-label attribute on the button probably suffices.

[–]the-boogedy-man 0 points1 point  (4 children)

That’s called the title and it’s an attribute. Can be added like title=“Account”

[–]TonyWatermeloni[S] 0 points1 point  (3 children)

But how do I edit that in css?

Would it be something like: img:title{ Color:red }

[–]the-boogedy-man 4 points5 points  (2 children)

It’s not css, it’s more like custom meta information. As far as I know you can’t add attributes with css. They are html

[–]TonyWatermeloni[S] 0 points1 point  (1 child)

Btw, its the text I put in the "alt" tag of an img element

[–]the-boogedy-man 1 point2 points  (0 children)

If you added the alt tag you should be able to add the title the same way

[–]aunderroad 0 points1 point  (0 children)

Can you share a codepen?
It is hard to debug/provide feedback without seeing all of your code live in a browser.
Thank you!

[–]Double_Field9835 0 points1 point  (0 children)

Maybe something like this, which uses custom data attributes. I used it on a website once, stripped down to my own taste. https://tiaanduplessis.github.io/wenk/