Hey guys. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create tooltips. These appear when you hover on the corresponding link.
To create these tooltips we need HTML and pure CSS. This project is super quick and easy-peasy. Let’s begin with the tutorial.
Video Tutorial:
If you like to learn by coding along to a video tutorial rather than reading this blog post, check out this video here down below. Also, subscribe to my youtube channel to stay updated with the latest tips tutorials and resources.
Project Folder Structure:
Let us start by creating the project folder structure. The project folder is called – Tooltips. Inside this folder, we have two files. The first one is index.html. It is an HTML document. The second file is style.css. This file is the stylesheet.
HTML:
We first start to code with the HTML. The HTML consists of a p tag with some random demo words. We apply a tag to two of these words. Now we add a ‘data-tip’ attribute to each of these anchor tags. The value of these attributes is set to the text you need for the corresponding tooltip.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tooltips</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt illo
iste porro, laboriosam sit ipsum nemo consequatur optio
<a href="#" data-tip="Here is tooltip 1">nesciunt</a> harum voluptas
libero magni, quae soluta modi. Unde impedit quod tempore. Modi et
mollitia magni optio odit, iste aliquam quae, nobis, voluptas nulla id
assumenda. Repudiandae harum, in odio aut eius quisquam accusamus quos,
eveniet minus illo quasi praesentium. Mollitia repellat odio atque
placeat, a modi
<a href="#" data-tip="And this is tooltip 2">laborum </a>exercitationem
pariatur cumque, eum perspiciatis deleniti quis at illo ab, totam
molestias sapiente nulla non sunt fugiat sed necessitatibus. Sed facere
quisquam vitae aliquam fugiat dolorum, quia error temporibus eveniet
suscipit consequatur dolore deleniti.
</p>
</body>
</html>
CSS:
Next, we use CSS to style these tooltips. We apply orange color to the anchor tag. Next, we use the ‘:after’ pseudo-element to create the tooltip shape. We also use it to display the content from ‘data-tip’.
In the next step we use the ‘:before’ pseudo-element to create the arrow shape. Initially we hide the pseudo-elements. On hover, we set the display of these elements to block thus making them visible.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #f0f5ff;
}
p {
width: 100%;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
background-color: #ffffff;
padding: 3.5em;
text-align: center;
font-size: 16px;
}
a {
position: relative;
color: orange;
font-size: inherit;
}
a:after {
position: absolute;
width: 12em;
background-color: #202842;
content: attr(data-tip);
padding: 0.6em 0;
color: #ffffff;
margin: auto;
left: -4.5em;
right: 0;
bottom: 1.5em;
text-align: center;
border-radius: 0.2em;
}
a:before {
position: absolute;
content: "";
height: 0;
width: 0;
border-top: 0.5em solid #202842;
border-left: 0.5em solid transparent;
border-right: 0.5em solid transparent;
margin: auto;
left: 0;
right: 0;
bottom: 1.1em;
}
a:before,
a:after {
display: none;
}
a:hover:before,
a:hover:after {
display: block;
}
That’s it for this tutorial. I hope you liked this tutorial. If you have any issues while creating these tooltips, you can download the source code by clicking on the download code button below.
I would love to hear from you. So if you have any queries, suggestions or feedback drop them in the comments below.
See you soon with yet another amazing tutorial. Happy Coding!
