HomeCSSSimple Tooltips On Hover | HTML & CSS Tutorial

Simple Tooltips On Hover | HTML & CSS Tutorial

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!

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

5 + 3 =

Most Popular