CODEWITHSUNDEEP
htmlcss
onTheInternet
onTheInternet

Reputation: 7253

My CSS tooltip only text, not Images

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

Upvotes: 0

Views: 72

Answers (1)

SW4
SW4

Reputation: 71150

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.

Upvotes: 2

Related Questions