CSS Tooltip
Sep 22, 2013     16:57:13

Today I'll try to show you a simple example how to create CSS3 tooltip (with HTML and no JavaScript) with a little bit of animation on show and hide.

Demo:

single lineSome tooltip text, multiple linesMultiple line tooltip text
and actually can be breacked with <br>.
and with tagsYou can use any kind of tags here


1. Tooltip structure:

So, first of all - the HTML structure of our future tooltip:

<span class="info-tooltip">
    <span class="info-tooltip-text">
		Some text that should be written here;
	</span>
</span>

Actually we can create the tooltip just with one element. The main container for text message and the tooltip tail with :before or :after pseudo element. But that is not very usable, because with one element structure we will have to change tooltip position each time for different height of its container element and lines of tooltip text. Two element structure will give an ability to preposition the tooltip and use any kind of text without changing it dimensions each time.


2. Tooltip container:

Our tooltip container should be position: relative. Because it contains our absolute positioned tooltip in a way we want.

.info-tooltip-demo {
    position : relative;
}

Than we should pass the tooltip html in our demo element <span class="info-tooltip-demo"></span>. Like this:

<span class="info-tooltip-demo">
    with tags
    <span class="info-tooltip">
        <span class="info-tooltip-text">
            You can use <b>any</b> <i>kind</i> of <u>tags</u> here <br><button>;)</button>
        </span>
    </span>
</span>

3. Tooltip style and position:

Lets position our tooltip on its place (place in which tooltip will be on demo element hover state).

Our tooltip background will be black (nut you can choose any color you want). The main tooltip container will be just 10px width and height. That is important, because wi will position the tooltip text container absolute, and with laying to bottom of main container. So it will always be in proper place relatively the tail.

Tooltip tail is a simple :before pseudo element, rotated on 45deg (actually we can do CSS triangle here, but I decided to make it with square).

So the code will be:

.info-tooltip-step-1 {
    position   : absolute;
    top        : -8px;
    right      : 5px;
    width      : 10px;
    height     : 10px;
    padding    : 0;
    margin     : 0;
    background : none;
}
.info-tooltip-step-1:before { // our tooltip tail
    content    : '';
    position   : absolute;
    left       : 0;
    top        : -5px;
    width      : 100%;
    height     : 100%;
    background : #000; // default color
    transform  : rotate(45deg); // rotated square
}

.info-tooltip-text-step-1 {
    position    : absolute;
    bottom      : 10px; // positioning text block relatively to tail
    right       : -10px; // positioning text block relatively to tail
    background  : #000;
    color       : #fff;
    font-size   : 12px;
    padding     : 5px 10px;
    white-space : nowrap;
}

Here what we will have on this step:

Demo elementtooltip text


4. Hover state from 0 opacity to 1:

For now our tooltip is strongly positioned in the place where it should be on hover.

The opacity animation will be done with transition. So we just need to add opacity: 0 for default tooltip state and opacity: 1 for hover state. And don't forget about transition - .2s transitions will be just fine :)

But here is the first problem. Hovering on top of our container (where actually our tooltip should be transparent) causes the hover on parental element and our tooltip shows.

So we should position not hovered state tooltip somewhere else. That can be done with the help of transform: translateY(-10000px). -10000px for sure that our tooltip will be far away from user. Nad than on show we can set transform: translateY(0) and everything will be on its place.

Also translate on :hover out should be with some delay. Otherwise the opacity transition will be far far away from user (actually on -10000px far).

.info-tooltip-demo:hover .info-tooltip {
	transform  : translateY(0);
	top        : -8px;
	opacity    : 1;
	transition : opacity .2s;
}
.info-tooltip {
    opacity    : 0;
    transform  : translateY(-10000px);
    transition : opacity .2s, transform 0s linear .3s;
}

Demo elementtooltip text


5. Hover state also with top animation:

Lets also add some top animation flow. The new hover state code will be:

.info-tooltip-demo:hover .info-tooltip {
    transform  : translateY(0);
	top        : -8px;
	opacity    : 1;
	transition : opacity .2s;
}
.info-tooltip {
    opacity    : 0;
    top        : -18px;
    transform  : translateY(-10000px);
    transition : opacity .2s, top .2s, transform 0s linear .3s;
}

Demo elementtooltip text


Done! Full source code with prefixes:

single lineSome tooltip text, multiple linesMultiple line tooltip text
and actually can be breacked with <br>.
and with tagsYou can use any kind of tags here

CSS:

.info-tooltip-demo {
    position : relative;
    cursor   : default;
}
.info-tooltip-demo:hover .info-tooltip {
    -webkit-transform  : translateY(0);
    -moz-transform     : translateY(0);
    transform          : translateY(0);
	top                : -8px;
	opacity            : 1;
	-webkit-transition : opacity .2s, top .2s;
	-moz-transition    : opacity .2s, top .2s;
	transition         : opacity .2s, top .2s;
}
.info-tooltip {
    position           : absolute;
    top                : -18px;
    right              : 5px;
    width              : 10px;
    height             : 10px;
    opacity            : 0;
    padding            : 0;
    margin             : 0;
    background         : none;
    -webkit-transform  : translateY(-10000px);
    -moz-transform     : translateY(-10000px);
    transform          : translateY(-10000px);
    -webkit-transition : opacity .2s, top .2s, -webkit-transform 0s linear .3s;
    -moz-transition    : opacity .2s, top .2s, -moz-transform 0s linear .3s;
    transition         : opacity .2s, top .2s, transform 0s linear .3s;
}

.info-tooltip:before {
    content           : '';
    position          : absolute;
    left              : 0;
    top               : -5px;
    width             : 100%;
    height            : 100%;
    background        : #000;
    -webkit-transform : rotate(45deg);
    -moz-transform    : rotate(45deg);
    transform         : rotate(45deg);
}

.info-tooltip-text {
    position    : absolute;
    bottom      : 10px;
    right       : -10px;
    background  : #000;
    color       : #fff;
    font-size   : 12px;
    padding     : 5px 10px;
    white-space : nowrap;
    text-shadow : none;
}

HTML:

<span class="info-tooltip">
    <span class="info-tooltip-text">
    	Some text that should be written here;
	</span>
</span>


PS. Thanks for reading ;)


blog comments powered by Disqus