CSS-only multimedia tooltip using attr()

Question

The CSS3 attr() function is useful, elegant, concise.

This particular example demonstrates this straightforwardness for a CSS_only tooltip. However, I have never managed to generate the content of the tooltip

<div tooltip="straight text [...]">

as anything other than straight text. Inserting an image tag (second tooltip example) will generate the litteral textual representation of the image tag.

Is there any way to include both image and text in an attr() function?

score 1 · Accepted Answer · answered Sep 19 '19 at 06:13

1

The CSS trick relies on changing the content of the pseudo class :before

Adding HTML content there will not work. See this answer: https://stackoverflow.com/a/22511546/11854340

answered Sep 19 '19 at 06:13

Chif

830
1
7
20

Also if you want to add image, add it like a background. I think this works fine. – Ankit Sep 19 '19 at 06:51

CSS-only multimedia tooltip using attr()

1 Answers1