1

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 rules to be generic and not a tag specific.

I reproduced my efforts in the js-fiddle http://jsfiddle.net/AqPN8/

As you can see in the fiddle it does work for links but not for images. Do you have any idea why not?

Technically I think that :hover and alikes should also for for <img> and not only <a>.

wirrbel
  • 3,173
  • 3
  • 26
  • 49

3 Answers3

5

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.

André Dion
  • 21,269
  • 7
  • 56
  • 60
3

::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.

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
2

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

Community
  • 1
  • 1
robooneus
  • 1,344
  • 8
  • 10