CSS Tooltip | Styled With No JavaScript & Under 1kb

Datetime:2016-08-23 03:00:43          Topic: CSS  JavaScript           Share

There are a lot of options out there when it comes to creating a HTML and CSS tooltip, and a lot offer all sorts of impressive functionality like transitioning, controls over placement and auto detection of edges to keep content showing. The issue is that with all the more advanced functionality comes a size increase, and often the inclusion of JavaScript. While those features might be impressive, to create a basic solution they’re just not necessary.

This short article is going to go through the process of creating a simple, but highly functional tooltip without JavaScript and under 1kb either minified or full. A full working example can be seen here:

See the Pen Example by html5andblog ( @html5andblog ) on CodePen .

Creating a HTML and CSS Tooltip – HTML Markup

First things first, we’ll start with the HTML. This is very similar to an earlier tutorial I did. With this only using HTML and CSS, data attributes are really the only viable solution to creating this effect:

<p>This is a <span class="tt tt-150" data-tooltip="Example Helper Content">tooltip</span></p>

This HTML consists of two element, a paragraph tag and a span tag. Although the paragraph tag could also be easily replaced with a div or most other elements that can contain text, the span tag is necessary because of it being set by default to display inline.

It’s on the span tag itself where we add the classes (tt tt-150) to activate the tooltip effect. The first class sets is where the majority of the styling is added, with the second class specifying a width (the options are: tt-150, tt-200, tt-250, and if it’s not included it’ll default to 100px wide).

Finally the data-tooltip attribute is added. This is where you specify the content that’ll appear on hover.

Creating a HTML and CSS Tooltip – Styling

This effect relies completely on CSS for it’s styling, and even gets the content to be displayed from the data attribute. Below is the annotated CSS, here I’ve made a note next to the functional aspects of it, but left the purely styling content blank.

.tt {
position: relative; /* Needed so ::after can be positioned relative to this */
-webkit-box-sizing: border-box; /* Prevent padding and borders affecting width / height */
-moz-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 1px dotted #333; /* Identify element as doing something */
}

.tt:hover::before, .tt:hover::after {
position: absolute; /* Set ::before & ::after to position absolute */
}

.tt:hover::before {
bottom: 20px; /* Position arrow below tooltip */
left: 50%;
margin-left: -5px;
width: 0; /* Shapes of CSS - Triangle */
height: 0;
border-top: 5px solid #111;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: "";
}

.tt:hover::after {
bottom: 25px; /* Position Tooltip */
left: 50%;
margin-left: -50px;
padding: 5px;
width: 100px;
border-top: 3px solid #e74c3c;
background-color: #111;
color: #fff;
content: attr(data-tooltip); /* Get data-attribute from element as content */
text-align: center;
font-size: 14px;
font-family: arial;
}

.tt-150:hover::after {
margin-left: -75px;
width: 150px;
}

.tt-200:hover::after {
margin-left: -100px;
width: 200px;
}

.tt-250:hover::after {
margin-left: -125px;
width: 250px;
}

The full minified version that’s well under 1kb in size is licensed under the MIT license and can be found here:

.tt{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-bottom:1px dotted #333}.tt:hover::after,.tt:hover::before{position:absolute}.tt:hover::before{bottom:20px;left:50%;margin-left:-5px;width:0;height:0;border-top:5px solid #111;border-right:5px solid transparent;border-left:5px solid transparent;content:""}.tt:hover::after{bottom:25px;left:50%;margin-left:-50px;padding:5px;width:100px;border-top:3px solid #e74c3c;background-color:#111;color:#fff;content:attr(data-tooltip);text-align:center;font-size:14px;font-family:arial}.tt-150:hover::after{margin-left:-75px;width:150px}.tt-200:hover::after{margin-left:-100px;width:200px}.tt-250:hover::after{margin-left:-125px;width:250px}




About List