---
title: CSS Tooltips
description: "> Create tooltips with CSS. ## Basic Tooltip Create a tooltip that appears when the user moves the mouse over an element: ` Hover over me Tooltip text ` ### Example Explained **HTML:** Use a container element (like ) and add…"
url: "https://apprentice.mn/docs/css-tooltips/"
updated: "2021-05-12"
category: CSS
---

# CSS Tooltips

> Create tooltips with CSS.

## Basic Tooltip

Create a tooltip that appears when the user moves the mouse over an element:

     `<style>
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>`

### Example Explained

**HTML:** Use a container element (like

) and add the `"tooltip"` class to it. When the user mouse over this

, it will show the tooltip text.

The tooltip text is placed inside an inline element (like ) with `class="tooltiptext"`.

**CSS:** The `tooltip` class use `position:relative`, which is needed to position the tooltip text (`position:absolute`). **Note:** See examples below on how to position the tooltip.

The `tooltiptext` class holds the actual tooltip text. It is hidden by default, and will be visible on hover (see below). We have also added some basic styles to it: 120px width, black background color, white text color, centered text, and 5px top and bottom padding.

The CSS `border-radius` property is used to add rounded corners to the tooltip text.

The `:hover` selector is used to show the tooltip text when the user moves the mouse over the

with `class="tooltip"`.

---

  

---

##  

## Positioning Tooltips

In this example, the tooltip is placed to the right (`left:105%`) of the “hoverable” text (

). Also note that `top:-5px` is used to place it in the middle of its container element. We use the number **5** because the tooltip text has a top and bottom padding of 5px. If you increase its padding, also increase the value of the `top` property to ensure that it stays in the middle (if this is something you want). The same applies if you want the tooltip placed to the left.

### Right Tooltip

                  `.tooltip .tooltiptext {
  top: -5px;
  left: 105%;
}`

### Left Tooltip

     `.tooltip .tooltiptext {
  top: -5px;
  right: 105%;
}`

If you want the tooltip to appear on top or on the bottom, see examples below. Note that we use the `margin-left` property with a value of minus 60 pixels. This is to center the tooltip above/below the hoverable text. It is set to the half of the tooltip’s width (120/2 = 60).

### Top Tooltip

      `.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}`

### Bottom Tooltip

     `.tooltip .tooltiptext {
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}`

## Tooltip Arrows

To create an arrow that should appear from a specific side of the tooltip, add “empty” content after tooltip, with the pseudo-element class `::after` together with the `content` property. The arrow itself is created using borders. This will make the tooltip look like a speech bubble.

This example demonstrates how to add an arrow to the bottom of the tooltip:

### Bottom Arrow

      `.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}`

**Note:** The `border-width` property specifies the size of the arrow. If you change this, also change the `margin-left` value to the same. This will keep the arrow centered.

The `border-color` is used to transform the content into an arrow. We set the top border to black, and the rest to transparent. If all sides were black, you would end up with a black square box.

This example demonstrates how to add an arrow to the top of the tooltip. Notice that we set the bottom border color this time:

### Top Arrow

      `.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}`

This example demonstrates how to add an arrow to the left of the tooltip:

### Left Arrow

      `.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}`

This example demonstrates how to add an arrow to the right of the tooltip:

### Right Arrow

      `.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%; /* To the right of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}`

## Fade In Tooltips (Animation)

If you want to fade in the tooltip text when it is about to be visible, you can use the CSS `transition` property together with the `opacity` property, and go from being completely invisible to 100% visible, in a number of specified seconds (1 second in our example):

### Example

      `.tooltip .tooltiptext {
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  opacity: 1;
}`        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-tooltips%2F&linkname=CSS%20Tooltips](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-tooltips%2F&linkname=CSS%20Tooltips)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-tooltips%2F&linkname=CSS%20Tooltips](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-tooltips%2F&linkname=CSS%20Tooltips)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-tooltips%2F&linkname=CSS%20Tooltips](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-tooltips%2F&linkname=CSS%20Tooltips)[https://www.addtoany.com/share](https://www.addtoany.com/share)