My CSS tooltip only text, not Images

Question

I wrote some CSS for a tool tip

.toolTip{
    display:inline;
    position:relative;
}

.toolTip:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 220px;
}

HTML

    <p title="tester" class="toolTip">test</p>
    <img src="images/people/Tapolci_Jeff_abg_web.png" class="toolTip" title="Jeff T." alt="Jeff Tapolci" />

It only works with the text, but not the image. How can I fix this?

Fiddle

SW4 · Accepted Answer · 2014-05-08 14:16:21Z

2

It is important to note that img elements are replaced elements so psuedo elements such as :before or :after will not work unfortunately. You should wrap it in, say, a span and add the class to that.

Demo Fiddle

Replaced Elements:

In CSS, a replaced element is an element whose representation is outside the scope of CSS. These are kind of external objects whose representation is independant of the CSS. Typical replaced elements are <img>, <object>, <video> or forms element like <textarea>, <input>. Some elements, like or are replaced elements only in specific cases. Object inserted using the CSS content properties are anonymous replaced elements.

answered May 8, 2014 at 14:16

SW4

71.5k20 gold badges137 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

My CSS tooltip only text, not Images

1 Answer 1

Demo Fiddle

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related