Simplicity at it's best! es:CSS comes with a basic tooltip feature. It is made with pure CSS. No additional JavaScript is needed to get this functionality.
You can add additional information to any element simply by adding the .tooltip class. The additional information can be stored in the i tag. Only inside of .tooltip the i turns into the tooltip content storage. Outside it works as everybody expect as italic tag.
But that's not all: every tooltip can styled with a dedicated color. Let's try it:
Lorem ipsum dolor sit amet, Hover meIn condimentum facilisis porta. Sed nec diam eu diam mattis viverra. consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero.
Vestibulum mollis mauris enim. Or hover here!This tootips's arrow also has a border.
Pure CSS!Morbi euismod magna ac lorem rutrum elementum. Hover here too!Tooltip made with pure CSS!Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Lorem vel neque sit amet nunc gravida congue sed sit amet purus.
Always remember: it is possible to combine almost every CSS class with each other!
Try the following:
<span class="tooltip highlight ice">Hover me!<i>Tooltip shown while hovering ...</i></span>Hover here ↓
You add the tooltip class to almost every html element. But sometimes you have to go more creative. Look at this example:
<div class="tooltip onehundred nb"> <input class="onehundred info" type="text" /> <i>Tooltip shown while hovering ...</i> </div>Hover here ↓
You can interlock it where ever you want. Nearly every sub element can wear the tooltip class. Try a cascade like this:
<blockquote> <span class="tooltip nb flat"> Less is more! <i>Said <b>Mies van der Rohe</b> once</i> </span> </blockquote>
Less is more!Said Mies van der Rohe once ← Hover this
One more very helpfull es:CSS feature is the .notification class. You can use it for span tags to put a notification badge right next to any element you want.
The .notification comes along with several colors. They are easy to use by calling just the color class next to notification. See the examples:
| Result | Code |
|---|---|
| 5 |
<span class="notification">5</span> |
| 9 |
<span class="notification red">9</span> |
| 7 |
<span class="notification orange">7</span> |
| 14 |
<span class="notification green">14</span> |
| 3 |
<span class="notification blue">3</span> |
| 17 |
<span class="notification pink">17</span> |
| 162 |
<span class="notification magenta">162</span> |
| 8 |
<span class="notification yellow">8</span> |
| 8 |
<span class="notification ice">8</span> |
| 8 |
<span class="notification aqua">8</span> |
| 8 |
<span class="notification purple">8</span> |
| 6 |
<span class="notification magenta large">6</span> |
| Result | Code |
|---|---|
| 5 |
<span class="notification flat">5</span> |
| 9 |
<span class="notification red flat">9</span> |
| 7 |
<span class="notification orange flat">7</span> |
| 14 |
<span class="notification green flat">14</span> |
| 3 |
<span class="notification blue flat">3</span> |
| 17 |
<span class="notification pink flat">17</span> |
| 162 |
<span class="notification magenta flat">162</span> |
| 8 |
<span class="notification yellow flat">8</span> |
| 8 |
<span class="notification ice flat">8</span> |
| 8 |
<span class="notification aqua flat">8</span> |
| 8 |
<span class="notification purple flat">8</span> |
| 6 |
<span class="notification magenta large flat">6</span> |