Fancy pure CSS3 hover tooltips with animations

  • Topics:

    • This tutorial covers how to create really basic tooltips that can be used anywhere and for anything. The tooltips are completely CSS based and only animations are CSS3 otherwise they will work on any platform.

     

    What They Look Like:

    See the Pen KdveeO by Alex (@fabriceleven) on CodePen.

     

    How it Works:

    • We first create a unique div class that we will attach to div classes where we want the tooltip to show up.
    • Inside this div class, we will then create a span class that will house our tooltip.
    • When users hover over the area to which the “tooltip” class is attached, our span class will become visible again, thus creating a tooltip.
    • We also add some styling—like adding the pointing notch and CSS3 animation—to make things fancier.

    Let’s Get Started—the HTML

    First a little mark-up to create the staging area.

    <div class="wrapper">
<div class="box">
<p> This is some awesome text just <b class="tooltip">hover over me here 
<span>This is a simple tooltip</span> </b> and see a cool tooltip </p> 
</div> 
</div>

     

     

    • We have attached the “tooltip” tag to the bold class which surrounds “hover over me here” this will trigger the tooltip to show up once we hover over that area.
    • The span under it is the actual tooltip and you can put whatever html you want in there. It will only become visible once you hover over it.

    The CSS to Make it all Work

    body{
background: #f06;
background: #333;
min-height: 100%;
color: #999;
font-family: helvetica;
}

.wrapper{
position: relative;
margin-left: 10%;
margin-top: 10%;
}

.tooltip:hover span {
opacity: 1;
filter: alpha(opacity=100);
top: -6em;
left: 20em;
z-index: 99;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}

.box b {
  color: #fff;
}

.tooltip span {
	background: none repeat scroll 0 0 #222; /*-- some basic styling */
	color: #F0B015;
	font-family: 'Helvetica';
	font-size: 0.8em;
	font-weight: normal;
	line-height: 1.5em;
	padding: 16px 15px;
	width: 240px;
	top: -4em;  /*-- this is the original position of the tooltip when it's hidden */
	left: 20em;
	margin-left: 0;	
	/*-- set opacity to 0 otherwise our animations won't work */
	opacity: 0;
	filter: alpha(opacity=0);  	
	position: absolute;
	text-align: center;	
	z-index: 2;
	text-transform: none;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease-in-out;
}

.tooltip span:after {
	border-color: #222 rgba(0, 0, 0, 0);
	border-style: solid;
	border-width: 15px 15px 0;
	bottom: -15px;
	content: "";
	display: block;
	left: 31px;
	position: absolute;
	width: 0;
}

    In the “.tooltip:hover span {“ we turn on our tooltip and give it a position where it should show up relative to the tooltip container. You can adjust left and top to get it in just the right place.

    In the “.tooltip span {“ class we style our tooltip and give it initial position, then hide it. Based on the Left and Top values here our tooltip will either slide from the bottom or from another place. You can style this however you want—you can add rounded corners, texture etc.

    In the “.tooltip span:after {“ we add the little arrow pointing down. Essentially we create a border radius with a high value and then give it an absolute position.

    That’s it!

    In Development