CSS - Instant Tooltip
Contents
About
The title tag is often used to show extra information about an element on screen, but sadly you have to hover your mouse over it for almost 2 seconds for it to appear - which means you probably won't notice it. Using CSS you can pretty easily create a "proper" instant tooltip that looks however you want and appears instantly... or even has transition effects. Here's some basic code that will do that. Rather than compete with the existing "title" I suggest you add a custom HTML tag called "tooltip" and use that instead. The trick is that you'll probably want to add a "tooltip" class to any objects have this tag... you'll get it when you look below.
Instant Tooltip
This is a CSS + HTML only solution for an instant "tooltip" to replace the slow appearing "title" tag.
<!doctype html>
<html lang="en">
<head>
<title>Centered Image Example</title>
<style>
/**
* Special 'tooltip' class that works as follows:
* <span tooltip="Tooltip text here." class="tooltip">Hover</span>
*/
.tooltip {
display: inline;
position: relative;
}
.tooltip:hover:after {
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
top: 26px; /* Change to 'bottom' to put tooltip on top. */
color: #fff;
content: attr(tooltip);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
.tooltip:hover:before { /* This part draws a little arrow. */
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
top: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
transform: scaleY(-1); /* Point arrow upwards. */
}
</style>
</head>
<body>
<br><br>
<span tooltip="Tooltip that instantly appears." class="tooltip">Hover</span>
</body>
</html>
That again in one line:
<style>.tooltip { display: inline; position: relative; } .tooltip:hover:after { background: #333; background: rgba(0,0,0,.8); border-radius: 5px; top: 26px; color: #fff; content: attr(tooltip); left: 20%; padding: 5px 15px; position: absolute; z-index: 98; width: 220px; } .tooltip:hover:before { border: solid; border-color: #333 transparent; border-width: 6px 6px 0 6px; top: 20px; content: ''; left: 50%; position: absolute; z-index: 99; transform: scaleY(-1); }</style>See Also
- CSS - Dropdowns on Hover - Similar to a tooltip but heavier and more versatile in that you include a whole extra div which could include photos etc.
Links
- w3schools - Fade in tooltip - Same tooltip, but fades in... I don't like this solution though, because requires a child node.
- chrisbracco.com - A simple CSS tooltip - Great solution because you don't need a class name.. use 'data-tooltip' instead.
- menucool.com - CSS Tooltip Generator - Actually uses what I would call a dropdown instead (adds and extra child div), and so might be overkill... or amybe you want to lookup: CSS - Dropdowns on Hover.
