HTML5 Tooltip Via Css And Data- Field Works On Link But Not On Image

following the tutorial http://ejohn.org/blog/html-5-data-attributes/ I wanted to adapt the process of creating a tooltip for images (not links). So I adjusted the 'tooltip' class r

Solution 1:

You cannot use ::before/::after pseudo-elements on tags that cannot have children, i.e., <img>, <br>, <hr>, etc: MDN Documentation for :before

:before creates a pseudo-element that is the first child of the element matched.

Solution 2:

::before creates a pseudo-element that is the first child of the element matched.

<img> element is an empty tag not a container tag, you can't use ::before pseudo-element on elements like <img>.

As an alternative, you can wrap the image by an inline wrapper element like <span>:

<span class="tooltip" data-tip="show a tooltip for image">
    <img alt="show a tooltip for image" src="path/to/image" />
</span>

JSFiddle Demo.

Solution 3:

Images do not allow for pseudo elements, thus setting a :before or :after on an <img> will not work.

Read for more info: CSS :after not adding content to certain elements