Create tooltip image that changes on hover

Created a grey image that isn’t in your face but when you hover over it, it turns into a color image. And then you can set tooltip property on hover.

CSS

/* Tooltips */
.infotip {
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: bottom;
    background: url('info-grey.png');
    background-size: 15px 15px;
    background-repeat: no-repeat;
}

.infotip:hover {
    background-image: url('info.png');
}

HTML

<span class="infotip"></span>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s