Create a Custom Tooltip Using HTML & CSS

Create a Custom Tooltip Using HTML & CSS (Free Code)

Custom Tooltip CSS

In this article, you will learn how to make Custom Tooltip using HTML CSS. Currently, CSS Tooltip is used in different elements of the website.

What is a tooltip in HTML code? A tooltip is basically a kind of hover or onclick effect to show some information in the form of a popup. In most cases, CSS’s ‘Before’ and ‘After’ is used to create a custom Tooltip.

Custom Tooltip CSS

In this article, we will learn how to create a tooltip with HTML content. Creating HTML Custom Tooltip is very easy if you know basic HTML and CSS. 

Currently, this type of CSS tooltip is used in the navigation bar of almost every website. Which makes the menubar more attractive and advanced. In this article, I will show you how to create an HTML tooltip on hover.

In this menu bar, I have created five menu items and added an icon and Custom Tooltip in each. Only CSS is used to create this simple Tooltip. No JavaScript or JQuery was used. So if you are a beginner and want to make a CSS tooltip for the first time then this design is best for you.

See the Pen
Tooltip Menu by Shantanu Jana (@shantanu-jana)
on CodePen.

First, a menu bar has been created on the webpage. This is basically the Vaticel menu bar. In it, I added five menu items. 

Under normal circumstances, we can only see the icons. This HTML tooltip attribute cannot be seen. When hovering over that icon, the tooltip will appear.

How to Create a Tooltip Using CSS

Now if you want to create a tooltip with HTML content then you need to have some idea about HTML and CSS. You have two options. 

You can create it by downloading the source code directly if you want. Or you can learn how to create a CSS tooltip by following the step-by-step tutorials below. From this CSS tooltip tutorial, you will know…

  • How to add CSS tooltip with any element.

Step 1:

The basic structure of the Tooltip menu bar

I first created a Vartical menu bar using the following HTML and CSS. This is basically the basic structure of this menu bar.

<div class=”menu”>
</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: ‘Open Sans’, sans-serif;
}
html, 
body {
  height: 100vh;
  background-color: #046bd2;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
}

The width of this menu bar is 75px, height: 410px although you can change the size to your liking. The background color white has been used here and some box shadows have been used to enhance the look.

.menu {
  position: relative;
  width: 75px;
  height: 410px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 10px 0 50px rgba(0, 0, 0, 0.2);
}
basic structure of the Tooltip menu bar

Step 2:

Custom tooltip menu bar’s menu item

I have added all the information related to the menu bar in this Custom Tooltip menu bar by the following HTML. An icon has been added here and the text used for Tooltip has been added.

<ul>
  <li>
     <i class=”fas fa-home fa-lg”></i>
     <span>Home</span>
  </li>
  <li>
     <i class=”fas fa-envelope fa-lg”></i>
     <span>Messages</span>
  </li>
  <li>
     <i class=”fas fa-cog fa-lg”></i>
     <span>Settings</span>
  </li>
  <li>
     <i class=”fa fa-book fa-lg”></i>
     <span>Our Book</span>
  </li>
  <li>
     <i class=”fas fa-sign-out-alt fa-lg”></i>
     <span>Log Out</span>
  </li>
</ul>

The basic design of those menu items has been done by CSS below. Basically, the icons used here are CSS which are designed below.

ul {
  position: absolute;
  width: 100%;
}
li {
  position: relative;
  list-style: none;
  border-radius: 10px;
  height: 75px;
  margin: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
li:hover {
  background-color: #000000;
  color: #ffffff;
}
basic design of those menu items

Step 3:

Design the CSS Tooltip

The text used to create the custom Tooltip is designed with the following CSS. Opacity: 0 is used here which means we will not be able to see this text under normal conditions.

span {
  font-weight: 600;
  position: absolute;
  left: 100px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: 0.3s;
}
Design the CSS Tooltip

Arrangements have now been made to implement this CSS Tooltip. The instructions here are that when you hover over those menu items, the opacity will be: 1 and Tooltip will appear.

li:hover span {
  visibility: visible;
  opacity: 1;
  padding: 20px;
  background-color: #000000;
  border-radius: 10px;
  box-shadow: 10px 0 50px rgba(0, 0, 0, 0.2);
}
Custom Tooltip Using HTML

Step 4:

Make Tooltip CSS more interesting

As you can see in the picture above this simple CSS tooltip is almost made. However, some more effects have to be added. Now using CSS’s ‘Before’ I have added an arrow sign to the pure CSS tooltip.

span:before {
  content: ”;
  position: absolute;
  left: -20px;
  transition: 0.4s;
  border-top: 10px solid transparent;
  border-right: 20px solid #000000;
  border-bottom: 10px solid transparent;
}
Make Tooltip CSS more interesting

Hopefully from this CSS tooltip tutorial, you have learned how to create it. First, I create a menu bar, and then I arranged to see them through the hover effect. 

I have kept the text a bit away from the menu bar. This will make them look like a web tooltip. At the end of it all, I added an arrow sign before. Be sure to comment on how you like this CSS custom tooltip tutorial.