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

回答1:

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

回答2:

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.

回答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.

来源：https://stackoverflow.com/questions/18443034/html5-tooltip-via-css-and-data-field-works-on-link-but-not-on-image