A Guide to Create Pure CSS Tooltips

I recently completed a little lesson on how to make basic tooltips with pure CSS (and no additional HTML element or JavaScript). Later, I applied this strategy to my own project and discovered several ways to enhance it.

This post is a step-by-step guide to understanding CSS techniques so you can create pure-CSS tooltips as well.

By the conclusion of this article, you'll know how to use a basic attribute to add a tooltip to any element.

This technique was clever and well-executed, however it lacked genericity.

Optimising the solution

I'll make this method more generic in this section, and we'll learn more about CSS properties. Here's what we'd like to be able to achieve at the end:

<button tooltip=”tooltip content here”> click here !! </button>

Furthermore, we want to be able to simply set the tooltip position:

<button tooltip=”tooltip content here” tooltip-position=”left” > click here !! </button>

We'll start by adding a before and after pseudo element to the button, as seen in the video.

::after and ::before are pseudo-elements that allow you to insert content before or after the content of an element on a page using CSS. This is how they work:

div::after {
 content: “after”;
}
div::before {
 content: “before”;
}

The end outcome appears to be as follows:

<div>
 before
 <!-- div content here -->
 after
</div>

Let's take it one step at a time.

Step 1: Create a tooltip attribute that looks like this:

<button tooltip=”simple tooltip here”> click Me !! </button> 

The pseudo-elements ::after and ::before are required. These will be a basic rectangle containing the tooltip's content. By placing a border around an empty element created using the content attribute, we can make a basic rectangle with CSS.

The tooltip content is shown using the::before pseudo-element. We combine it with the property's content and retrieve the value of the tooltip attribute. A text, an attribute value from the element, or even an image using url(path/image.png) can be used as the content value.

The button element's location must be relative in order for this to operate. To put it another way, the position of all items within the button is proportional to the position of the button element.

With the transform property, we apply some position trickery to make the tooltip in the middle, and this is the outcome. Our CSS is as follows:

button{
  margin:auto;
  background: #3498db;
  font-family: Arial;
  color: #ffffff;
  font-size: 14px;
}
[tooltip]{
  margin:20px;
  position:relative;
}
[tooltip]::before {
    content: "";
    position: absolute;
    top:-6px;
    left:50%;
    transform: translateX(-50%);
    border-width: 4px 6px 0 6px;
    border-style: solid;
    border-color: rgba(0,0,0,0.7) transparent transparent     transparent;
    z-index: 100;
}
[tooltip]::after {
    content: attr(tooltip);
    position: absolute;
    left:50%;
    top:-6px;
    transform: translateX(-50%)   translateY(-100%);
    background: rgba(0,0,0,0.7);
    text-align: center;
    color: #fff;
    padding:4px 2px;
    font-size: 12px;
    min-width: 80px;
    border-radius: 5px;
    pointer-events: none;
}

Step 2: To construct a tooltip location, we simply use the ::before and ::after pseudo-elements. The HTML for our button will be as follows:

<button tooltip=”tooltip here” tooltip-position=”left”> click here !! </button>

The tooltip can be placed on the right, left, top, or bottom of the screen.

[tooltip-position='left']::before{
  left:0%;
  top:50%;
  margin-left:-12px;
  transform:translatey(-50%) rotate(-90deg) 
}
[tooltip-position='top']::before{
  left:50%;
}
[tooltip-position='bottom']::before{
  top:100%;
  margin-top:8px;
  transform: translateX(-50%) translatey(-100%) rotate(-180deg)
}
[tooltip-position='right']::before{
  left:100%;
  top:50%;
  margin-left:1px;
  transform:translatey(-50%) rotate(90deg)
}
[tooltip-position='left']::after{
  left:0%;
  top:50%;
  margin-left:-8px;
  transform: translateX(-100%)   translateY(-50%);
}
[tooltip-position='top']::after{
  left:50%;
}
[tooltip-position='bottom']::after{
  top:100%;
  margin-top:8px;
  transform: translateX(-50%) translateY(0%);
}
[tooltip-position='right']::after{
  left:100%;
  top:50%;
  margin-left:8px;
  transform: translateX(0%)   translateY(-50%);
}

step 3: we'll finish off by adding a basic hover motion to the tooltip. The following CodePen depicts the final outcome (you can click through to view the complete code).