Creating A Tooltip Using CSS
You probably already know what a tooltip is.
A tooltip is an icon or text, which when hovered over gives us more information in a bubble or pop-up.
You normally find tooltips in forms, but you can place them wherever users require more information.
In the above image, the circle with the question mark within shows a tooltip. When hovered over, this tooltip is gives more information about the types of characters your password must include.
You can get frameworks to implement tooltips in your website, but most of the time, these frameworks use JavaScript to accomplish this.
In this article, we will learn how to create tooltips using just CSS in a relatively simple way.
Before we begin, the final HTML and CSS file for implementing tooltip is available at the end of this blog. We have described in detail each and every element used in HTML and CSS for implementing tooltip in the easiest way possible.
You will be able to implement tooltip feature on any website using just HTML and CSS, after completely going through this article.
So Let’s Begin…
We will begin by creating a simple HTML page asking for password.
Step 1: Creating A Simple HTML Page To Display Tooltip
Here is the basic HTML code for form page,
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Awesome CSS Tooltip</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <form> <label>Password:</label> <input type="password" /> <span class="tooltip">?</span> </form> </body> </html>
As you can see, we have linked our “style.css” file in the above html.
<link href="styles.css" rel="stylesheet" type=" text/css" />
We will be creating the tool-tip using this CSS file.
We use a simple form to try the tool-tip function. This form only has one field labeled as “Password” as we are using it only for the illustrating how the tooltips works.
<form> <label>Password:</label> <input type="password" /> <span class="tooltip" data-tooltip="Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters">?</span> </form>
We have used the class “tooltip” to implement the tooltip feature using CSS. This we will discuss next section.
Step 2 : Basic CSS Styles For Our HTML Page
Before creating the CSS for “tooltip”, we must create some basic CSS styles for our html page.
body{
background: #4da73c;
color: #fff;
font-family: verdana;
}
This will give an html page with nice green background. We have also selected verdana font and font color as white.
form{
position: relative;
width: 100%;
max-width: 600px;
margin: 20%auto;
}
We have positioned the form “relatively”, with a maximum width of 600 pixel and a margin of 20%.
Formlabel{
font-size: 32px;
letter-spacing: 1px;
}
Form label class is for specifying the font size and letter spacing for the label text which we will be using.
forminput{
margin: 0 10px;
padding: 8px 8px 6px;
font-size: 20px;
border: 0;
color: #444;
}
Here, we have the styles for the form field. There is nothing complicated about this style. We have given an appropriate margin and padding along with specifying font size and color for form fields.
So that’s our default css styles for our Form page which we will be using to demonstrate how to implement the tooltip feature using CSS.
Let’s Create Tooltip Using CSS
Step 4: CSS Style For Tooltip
You might have noticed that we have used the class “tooltip” in our html file. This is the style we are going to apply for the question mark sign (“?”) which will be acting as our tooltip.
.tooltip{
position: relative;
background: rgba(0,0,0,0.3);
padding: 5px 12px;
border-radius: 100%;
font-size: 20px;
cursor: help;
}
We have to first position the tooltip relatively by applying “position: relative;” style. The reason for relative positioning of the tooltip is that we will be using pseudo elements later in this method which can be “Absolute” positioned. So we want those pseudo classes “absolute” positioned relatively to this element.
Next we are giving a black background color for the tooltip using the rgba() method,
background: rgba(0,0,0,0.3);
in which r,g,b stands for red, green & blue and a stands for ‘alpha’ which controls the opacity.
We will give a black-background to our tooltip circle and reduce its opacity to 0.3 for making it resemble a dark green color.
Next we are going to apply some basic padding and border radius styles to the question mark sign (“?”) to make our tooltip look good.
padding: 5px 12px; border-radius: 100%; font-size: 20px;
With the above CSS, we are applying padding to the circle enclosing the “?”, and making the border-radius 100% to make it a full circle.
Font-size determines the size of “?” sign, which we use as our tooltip in this example.
We are also adding “cursor:help;” in the CSS, this will give a question mark sign under the mouse pointer when you hover over that element, as shown in the image below.
The toot-tip contains some content (in this example we are giving more information regarding the characters that should be included in the “password” field).
Step 5: Give The Content For Tooltip Inside HTML
Next challenge before us is, where to put this content inside the tooltip?
To accomplish this task, we are going to add an attribute in the HTML file we created before.
<span class="tooltip">?</span>
Here, we do not want to add any extra markup, like creating another span to add the content inside the tooltip.
We can include the content for tooltip within this span.
We are going to do this by adding a “data” attribute. The data attribute name here is going to be “tooltip”.
<span class="tooltip" data-tooltip="">?</span>
data-tooltip is our data attribute using which we add the content that should be displayed inside the tooltip.
Next, we are going to add the instructions regarding the character that should be present in the password, inside our data-tooltip attribute.
<span class="tooltip" data-tooltip="Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters">?</span>
Now we have added the text that should appear inside the tooltip. Next we are going to learn how to make this text appear inside the tooltip when users hover over the question mark sign.
Step 6: Creating Tooltip Container Using Pseudo Elements
First, we need to create the containers inside which the content of tooltip has to be displayed.
For doing this, let’s go back to the style.css file and make pseudo elements for .tooltip class.
We are going to create ::after and ::before pseudo classes to make the content of our tooltip appear.
Basically, using a pseudo class like “::after” you can target a position just after the element which uses the main class and style that position.
Similarly, using the pseudo class ::before you can style the position just before the element where main class is used (in this case “?” is that element).
It’s a very useful pseudo class to inject extra content on a page.
We will create a pseudo class for “tootlip”as shown below.
.tooltip::before, .tooltip::after{
position: absolute;
left: 50%;
}
We are creating a common class for ::before and ::after styles.
Here, we have absolutely positioned both ::before and ::after styles, because we want them to be positioned above the ‘question mark’ and we want them to be centered above “?”.
To make the tooltip centered above the “?” we have to use the “left:50%;” attribute.
Now, we are going to use the ::before to style the little triangle at the bottom of our tooltip.
The ::after is used to style the content inside the tooltip.
Let’s see how it is done.
First we will create the little triangle at the bottom of tooltip.
.tooltip::before{
content: "";
border-width: 10px 8px 08px;
border-style: solid;
border-color: rgba(0,0,0,0.3) transparent transparent transparent;
top: -20px;
margin-left: -8px;
}
We should use content:””; attribute to show that this element doesn’t have a content. Since we have injected some empty content, we can now style it.
We can create triangles in CSS using the border-width attribute.
By this line,
border-width: 10px 8px 08px;
We have specified that the border-width to the top is 10 pixel, right is 8 pixel, down 0 pixels and left 8 pixels.
This is going to create a triangle for us.
Next we are going to create a solid border for this section and make the right, bottom and left areas transparent, so that only the top “triangle” area is seen.
border-style: solid; border-color: rgba(0,0,0,0.3) transparent transparent transparent;
After making the border solid, we are applying colors for the top, right, bottom and left sides of the border.
We should use the same “border-color:rgba();” attribute here, which we used for styling the circle around the question mark.
border-color: rgba(0,0,0,0.3) transparent transparent transparent;
Here, we have given black color (0,0,0) for the top portion of border and reduced its opacity to 0.3 to give us a dark green color, just like we did for getting the style for circle around the “?”.
We made the right, bottom and left portions of the border hidden by making the transparent.
Even if we had created the right and left borders, they are transparent. The only border with color is the top border. What this will do is that, the hidden border on left and right will give us a triangle effect in conjunction with the colored top border.
The end result will look like this.
If you do a Google search for “i” you will learn more about it.
“Margin-left” and “top” attributes are used to position this triangle centered above the circle.
top: -20px; margin-left: -8px;
Now we have created the triangular tail at the bottom of our tooltip, that points to the “?” sign.
Next, we need to style the rounded rectangle region of the tooltip where the information is displayed. For this, we will be using the ::after attribute.
.tooltip::after{
content: “some text”;
background: rgba(0,0,0,0.3);
top: -20px;
transform: translateY(-100%);
font-size: 14px;
margin-left: -150px;
width: 300px;
border-radius: 10px;
color: #fff;
padding: 14px;
}
Hence I have used,
content: “some text”;
In the opening section of pseudo class .tooltip::after
Now we need to give this section that same background color we used for creating the triangle region (which is black, with an alpha/opacity of 0.3).
So I have added,
background: rgba(0,0,0,0.3);
Then I have centered this section with our “question mark”, like before. I am using a width of 300 px for the rounded rectangle box, and a margin of -150 px to center it with respect to the question mark.
top: -20px; width:300px; margin-left: -150px;
Now we will give padding and make the edges of rectangle rounded (by applying border-radius).
border-radius: 10px; color: #fff; padding: 14px;
This will also set the color of text inside the rounded rectangle as white (#fff).
Now the rounded rectangle region that displays content is ready. But yet, it is not properly positioned. The current HTML page will look like something shown below.
Basically the rounded rectangle overlays above the “triangle” region we had created, since both the ::before and ::after uses same margin and are placed 20 pixels above the question mark.
We need to bring the rounded rectangle box just above the triangular section we created previously, so that they both together will appear as a chat box.
We don’t know what the exact height of rounded rectangle to place it just above the triangle, what we want is to transform 100% height of the rounded rectangle vertically so that it will be placed just above the triangle.
Since both these elements (triangle & rounded rectangle) use top: -20px; we just need to transform the top of rounded rectangle vertically to a pixel height equal to its own height.
For this we use, transform: translateY(-100%);
Now we have a proper structure that looks like an information box.
Step 7: Getting The Actual Information Inside The Tooltip
Our final challenge here is to get the right content, which contains more information, inside the tooltip.
Remember that we had placed the content that should appear inside the tooltip in our HTML file.
<span class="tooltip" data-tooltip="Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters">?</span>
Using CSS we can grab an attribute from HTML element. We are going to do that using attr() in the .tooltip::after pseudo CSS.
So, instead of, content: “some text”;
We are going to use content: attr(data-tooltip);
Here, “data-tooltip” is our HTML attribute.
Using the attribute we gave for the content in HTML we will be able to call that content and show inside our pseudo CSS. The result of this will be as shown below,
Now. all we have to do is to make our tooltip invisible in the beginning and appear only when the users hover over the question mark (?) sign.
This is very easy to do.
To make the tooltip invisible at the beginning we will make its opacity “0” in the following pseudo CSS we have written before.
.tooltip::before .tooltip::after{
position: absolute;
left: 50%;
opacity: 0;
}
For the Hover effect we will add a new pseudo CSS at the bottom of our style.css file. Let’s make the opacity “1” for the hovered state so that the tooltip is displayed on hover only.
/* CSS for Hover effects */
tooltip:hover::before.tooltip:hover::after{
Opacity:1;
}
This pseudo CSS only determine the hovered state, since we have used “:hover” after the main CSS .tooltip
Now our CSS tooltip is ready.
But the transition of tooltip won’t be as smooth as you would expect.
You can make the transition effects even better using CSS. For this, you just have to add the below transition rule in CSS for ::before and ::after pseudo classes.
To know more about transition styles that can be done using CSS read our article “CSS Animations And Transitions”.
.tooltip::before.tooltip::after {
transition: all ease 0.3s;
}
This process is a lot easier and less complicated compared to the implementation of tooltip using JavaScript.
For your reference, find the final HTML and CSS file to practice this.
Final HTML File For Testing The Tooltip
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Tooltip</title> <link href="styles.css"rel="stylesheet"type="text/css" /> </head> <body> <form> <label>Password:</label> <input type="password" /> <span class="tooltip"data-tooltip="Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters">?</span> </form> </body> </html>
Final CSS File Creating A Tooltip
body{
background: #4da73c;
color: #fff;
font-family: verdana;
}
form{
position: relative;
width: 100%;
max-width: 600px;
margin: 20%auto;
}
formlabel{
font-size: 32px;
letter-spacing: 1px;
}
forminput{
margin: 010px;
padding: 8px 8px 6px;
font-size: 20px;
border: 0;
color: #fff;
}
/* --------- Tooltip Styles ---------- */
.tooltip{
position: relative;
background: rgba(0,0,0,0.3);
padding: 5px 12px;
border-radius: 100%;
font-size: 20px;
cursor: help;
}
.tooltip::before, .tooltip::after{
position: absolute;
left: 50%;
opacity: 0;
transition: allease0.3s;
}
.tooltip::before{
content: "";
border-width: 10px 8px 08px;
border-style: solid;
border-color: rgba(0,0,0,0.3) transparent transparent transparent;
top: -20px;
margin-left: -8px;
}
.tooltip::after{
content: attr(data-tooltip);
background: rgba(0,0,0,0.3);
top: -20px;
transform: translateY(-100%);
font-size: 14px;
margin-left: -150px;
width: 300px;
border-radius: 10px;
color: #fff;
padding: 14px;
}
/* Hover states */
.tooltip:hover::before, .tooltip:hover::after{
opacity: 1;
}
Live demo
See the Live CSS Tooltip in action.
Eventhough working in the industry for long, i was using JavaScript for this… Had not thought that creating a tool tip with CSS and it is so easy… I will be using CSS here after… Good article… It’s simple and really helpful… Thank you Pranoy for sharing this… You made my day!
Great tutorial on creating tool-tips using CSS!
Could you please share any good article to know more about pseudo classes?
I find that section little bit confusing.
Thank You.
I am just getting started with instagram and found this article really helpful.
Is it possible to create tooltip using inline css?