CSS - Tooltips

CSS Tooltips are small pop-up boxes that appears when user hovers over an element, providing additional information or more context. Tooltips are styled and positioned using CSS properties inset, translateX, translateY etc. In this tutorial we will learn how create, position and style tooltips using CSS.

Demo Tooltip Examples

The following section shows examples of demo tooltips. The tooltip will be visible when you hover over the texts below.

TopTooltip on topRightTooltip on rightLeftTooltip on leftBottomTooltip on bottom

Table of Contents

How to Create Tooltips in CSS?Basic TooltipPositioning TooltipsTooltip ArrowsFade In TooltipsAdvantages of Tooltips

How to Create Tooltips in CSS?

We will be following below mentioned steps to create tooltips using CSS and HTML.

• Setting Up the Element:Create the element you want to hover over to trigger the tooltip such as, a button, an image, or any other HTML element.
• Create the Tooltip Text:Use <span> element to create tooltip container and include tooltip texts there. We will hide this initially usingvisibility: hiddenproperty in CSS.
• Position the Tooltip:Using CSSpositioningproperties, we will place the tooltip element at right location around container. We have set ‘position: absolute’ on the tooltip and ‘position: relative’ on the container.
• Styling the Tooltip:Modify the appearance of the tooltip by setting thebackground-color,text-color,padding, etc.
• Display the Tooltip on Hover:For displaying the tooltip when user hovers over the target element, we have used CSShover effect. This displays the tooltip.

Basic Tooltip

The following example demonstrates how to create a basic tooltips using CSS. The tooltip is displayed when the user hovers over the text.

Example

Positioning Tooltips

Using CSSpositioningrules we can position tooltips anywhere around main container such as top, bottom, left or right.

To position a tooltip, first we need to set ‘position: relative;’ property to element container of tooltip. It allows child elements with ‘position: absolute’ to be positioned relative to the element container. The position of absolutely positioned element can be easily adjusted by usinginsetproperties like top, bottom, right and left.

.element {

   position: relative;

}

.tooltip{

    position: absolute;

    top: 50px; 

    left: 50px;

}

The tooltip element will be placed 50px from top border and 50px from left border of container element.

Now let us look at an example of displaying tooltip in all different direction.

Example

Tooltip Arrows

To create an arrow for tooltip that appears from a specific side of the tooltip, add “empty” content after tooltip, using the pseudo-element::afterand content property. The arrow then can be shaped and colored using border property.

/* Arrow styles */

.tooltip-text::after {

    content: "";

    position: absolute;

    border-width: 5px;

    border-style: solid;

    border-color: black transparent transparent transparent;

}

We set color only for one side of border, this will result in a triangular shaped border on top side as the content is empty. To learn more about how to create arrow in CSS, visit our free tutorial onCSS arrows.

Example

Fade In Tooltips

The CSS fade in tooltip or tool tip animation is a tooltip that appears gradually with a fading effect, creating a smooth and visually appealing transition.

To create a fade in tooltip, first you need to setopacityof tooltip element as 0, then for hovered state of tooltip element set opacity as 1. Now usetransitionto smoothly change opacity from 0 to 1.

Example

Advantages of Tooltips

• Tooltips give extra info without making the webpage messy. They help users understand different parts of the webpage better.
• CSS tooltips can be customized and put in different positions for different screens and devices. This makes them useful for all types of websites, even those that change sizes on different screens.
• CSS tooltips are highly customizable, it allows developers to style them to match the website’s design theme, including colors, fonts, and animations.
• Implementing CSS tooltips is relatively simple and doesn’t require complex JavaScript or additional libraries.