3 Insanely Simple Steps To DIY Tooltips

GUIs have made monumental leaps since the inception of the humble Sketchpad. However, it’s the simplest tools that often spruce up your website from mediocrity to excellence. One such GUI element that holds this distinction is the humble tooltip. For the uninitiated, the tooltip is the little hovering box that pops up when you float your cursor over an item without clicking on it. A tooltip is typically used to provide information on an item or instructions to its purpose.

At first glance, tooltip might seem like an inelegant entity not worth investing time in when creating your website. On the contrary, it is like the last Lego block needed to complete your model set: a small piece without which the whole model falters. Tooltip allows visitors of your website to stay on the same page when browsing thus effectively eliminating the need for a ‘Help’ section. This enhances user experience and ensures that the point you are communicating through your website is delivered seamlessly without any needless interruptions. Moreover, they are a fine addition as it does not crowd out the content you are presenting whilst giving the viewer the choice to make use of the tooltip. These minute improvements in user experience could lead to a positive cumulative effect at the end of the day. I have outlined the methods to build your own CSS only tooltip below. I have chosen to demonstrate using CSS over JS to reduce the unwanted JavaScript overhead.

How to Build a DIY CSS tooltip?

You don’t have to rummage through StackExchange to come across a decent free tooltip.

What if I say you can make one yourself?

Here’s a DIY CSS tooltip that you can use. Alternatively, you can use SASS or Less, as per your preference.

1. Define HTML elements with tooltip related attributes

You can define any HTML elements such as button, anchor, span, and then add the attribute to enable a tooltip on them. In the following example, I’ve added tooltip-title attribute to the elements.

 
  <button tooltip-title="I'm a Tooltip!">Hover Me!</button> 
             

2. Add styling to your tooltip.

We are styling the tooltip in the :after pseudo-element of the selected element using CSS.

 
 
  [tooltip-title] {
    /* base style for the element */
    position: relative;
    cursor: pointer;
  }
  
  [tooltip-title]::after { 
  
    /* Takes the content from tooltip-title attribute */
    content: attr(tooltip-title);
    
    /* should be hidden initially */
    opacity: 0;
    
    /* basic styling tooltip */
    background: #222;
    border-radius: 4px;
    color: #fff;
    margin-bottom: 12px;
    padding: 0.5em 1em;
    white-space: nowrap;
    z-index: 10;
    
    /* Positioning tooltip */ 
    position: absolute;
    bottom: 100%;
    left: 50%;
      
    /* Basic effects on tooltip */   
    transition: all 0.2s ease-out 0.2s;
    transform: translate(-50%, 10px);
    transform-origin: top;
        
  }
    
  [tooltip-title]:hover::after {
    /* Making it visible on hover */
    opacity: 1; 
  }
  
  [tooltip-title]:hover::after {
    /* Effects on hover */   
    transform: translate(-50%, 0);
  }
             

3. Advanced tooltip features (optional).

3.1 Position your tooltips

In addition to its looks, you can define the position of the tooltip as well. For instance, top, bottom, left, right, top-right, top-left, bottom-right, bottom-left, etc.

Shown below is an example of making a tooltip display according to the position mentioned in the tooltip-position attribute. (tooltip-position='bottom' is shown as the example, you can do it similarly with other possible positions.)

 
  <button tooltip-title="I'm a Tooltip!" tooltip-position="bottom">Hover Me!</button> 
             

 
  [tooltip-position='bottom']::after {
    left: 50%;
    margin-top: 12px;
    top: 100%;
    transform: translate(-50%, -10px);
  }
  [tooltip-position='bottom']::before {
    left: 50%;
    margin-top: 5px;
    top: 100%;
    transform: translate(-50%, -10px);
  }
  [tooltip-position='bottom']:hover::after, [tooltip-position='bottom']::after {
    transform: translate(-50%, 0);
  }
  [tooltip-position='bottom']:hover::before, [tooltip-position='bottom']::before {
    transform: translate(-50%, 0);
  }

             

3.2 Colour your tooltips

You can define a color to your tooltip depending on the message you are displaying (example: success/green, warning/yellow, error/red, etc.)

In the example below, I'm adding tooltip-color attribute to the element to define the required color. (tooltip-color='warning' is shown as the example, you can do it similarly with other possible colors.)

 
  <button tooltip-title="I'm a Tooltip!" tooltip-color="warning">Hover Me!</button> 
             

 
  [tooltip-color="warning"]:hover::after {  
    background-color: #ffc107;
  }
             

3.3 Size your tooltips

You can define size to your tooltip depending on the length of the message you are displaying (example: small, medium, large, extra-large, auto-width, etc.)

In the below example I'm adding the tooltip-length attribute to the element to define the width of the tooltip. (tooltip-length='lg' is shown as the example, you can do it similarly with other possible lengths.)

 
  <button tooltip-title="I'm a Tooltip!" tooltip-length="lg">Hover Me!</button> 
             

 
  [tooltip-length='lg']::after {
    white-space: normal;
    width: 250px;
  }
             

You can have a look at the working demo of the above example here:

Tooltip Preview

Also, I've created an open source tooltip library called SpikeTip , which you can use in your website/ fork/ and then modify it the way you want.

For those of you who want to directly incorporate the tooltip into your projects, I have created an NPM package and you’ll find the installation guide here: SpikeTip - NPM Package.

Tooltips would definitely be a pertinent addition to your website and I hope the DIY mini-tutorial above helped you to create stylized tooltips of your choice.