INTRODUCTION
ROUNDABOUT SOLUTION
Welcome to a tutorial on how to create a simple CSS Custom Tooltip. Sick of those default boring yellow tooltip boxes? While we can’t directly style them in CSS, but there is still a way that we can do it with just pure CSS and HTML – We will exactly walk through how to do that in this guide, read on!
I have included a zip file with all the source code at the end of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
Related Articles
CONFESSION
AN HONEST DISCLOSURE
Quick, hide your wallets! I am an affiliate partner of Google, eBay, Adobe, Bluehost, Clickbank, and more. There are affiliate links and advertisements throughout this website. Whenever you buy things from the evil links that I recommend, I will make a commission. Nah. These are just things to keep the blog going, and allows me to give more good stuff to you guys - for free. So thank you if you decide to pick up my recommendations!
NAVIGATION
TABLE OF CONTENTS
Step 1 | Step 2 | Extra |
Closing |
STEP 1
SIMPLE CUSTOM TOOLTIP
A custom tooltip is actually not that difficult to achieve in HTML and CSS these days – Although it is kind of a hack, and take note that this is not supported in the old ancient browsers.
THE HTML
Pure CSS Custom Tooltip Example
Custom CSS Tooltip
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris nulla felis, convallis nec fringilla sit amet, volutpat in quam.
A wild doge.
Cras orci lorem, viverra id commodo sed, volutpat id elit.
Duis tortor diam, elementum ut augue rhoncus, ullamcorper finibus diam.
Duis et augue laoreet magna imperdiet laoreet eget a est.
In dignissim ultrices ultricies. Cras a sagittis ante, sit amet semper felis.
Yep, that’s actually all to the HTML. Instead of using the “default” title attribute, we define our own custom data-tooltip.
THE CSS
The CSS is where the magic happens. It may look like quite a handful at first, but in a nutshell, we are just building a custom box around data-tooltip using :before and :after.
/* [TOOLTIP] */
/* Set all elements with data-tooltip property to have relative position */
/* This is necessary to properly position the custom tooltip */
[data-tooltip] {
position: relative;
}
/* We can set more optional visual cues */
[data-tooltip] {
background: #fea;
font-weight: bold;
font-style: italic;
}
/* This will style & position the tooltip */
[data-tooltip]:before {
/* Set text of the tooltip */
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
font-weight: normal;
font-style: normal;
/* Size of tooltip */
width: 150px;
padding: 10px;
/* position */
position: absolute;
bottom: 100%;
left: -50%;
margin-bottom: 12px;
/* Colors */
background-color: #555;
color: #fff;
}
/* Create a triangle to make it look like a speech bubble */
[data-tooltip]:after {
content: " ";
border: 10px solid transparent;
border-top-color: #555;
border-bottom: 0;
position: absolute;
bottom: 110%;
left: 50%;
margin-left: -10px;
}
/* Hide the data-tooltip by default */
[data-tooltip]:before, [data-tooltip]:after {
visibility: hidden;
opacity: 0;
z-index: 100;
pointer-events: none;
transition: all 0.3s;
}
/* Show the tooltip on hover */
[data-tooltip]:hover:before, [data-tooltip]:hover:after {
visibility: visible;
opacity: 1;
}
/* [DOES NOT MATTER] */
html, body {
font-family: arial, sans-serif;
}
#demo {
max-width: 500px;
margin: 0 auto;
}
THE DEMO
STEP 2
TOOLTIP DIRECTION
Actually, there is no step 2… This is kind of an extra for those who want to position the tooltip below or beside the element. Who says that tooltips always have to be on top?
THE HTML
Pure CSS Custom Tooltip Example
Custom CSS Tooltip
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Doge Top
Mauris nulla felis, convallis nec fringilla sit amet, volutpat in quam.
Duis et augue laoreet magna imperdiet laoreet eget a est.
Doge Bottom
Cras orci lorem, viverra id commodo sed, volutpat id elit.
In dignissim ultrices ultricies. Cras a sagittis ante, sit amet semper felis.
Doge Left
Duis tortor diam, elementum ut augue rhoncus, ullamcorper finibus diam.
Nulla vitae diam sapien. Donec a nunc tristique, bibendum sem et, luctus purus.
Doge Right
Nullam ac feugiat tellus, ut mollis justo. Nulla id metus nec ipsum suscipit tempor.
This is the same method, except that we add an additional CSS class to the data-tooltip.
THE CSS
/* [BOTTOM] */
[data-tooltip].bottom:before, [data-tooltip].bottom:after {
top: 110%;
bottom: auto;
}
[data-tooltip].bottom:before {
margin-top: 10px;
margin-bottom: 0;
}
[data-tooltip].bottom:after {
border: 10px solid transparent;
border-bottom-color: #555;
border-top: 0;
}
/* [LEFT] */
[data-tooltip].left:before {
bottom: -110%;
right: 100%;
left: auto;
margin-left: 0;
margin-right: 10px;
}
[data-tooltip].left:after {
border: 10px solid transparent;
border-left-color: #555;
bottom: 0;
left: 0;
}
/* [RIGHT] */
[data-tooltip].right:before {
bottom: -110%;
left: 100%;
margin-left: 15px;
}
[data-tooltip].right:after {
border: 10px solid transparent;
border-right-color: #555;
border-left: 0;
bottom: 0;
right: -15px;
}Not much of an addition here, except that we are just playing with the positioning of :before and:after.
THE DEMO
Doge Bottom
Doge Left
Doge Right
EXTRA
DOWNLOAD & MORE
That’s all for the code, and here is the download link as promised.
SOURCE CODE DOWNLOAD
Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
CLOSING
WHAT’S NEXT?
Thank you for reading, and we have come to the end of this guide. I hope that it has helped you in your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!
The post 2 Steps Pure Css Custom Tooltip appeared first on Code Boxx.
