YouTipMouse over me Tooltip text
[Try it Yourself »](#)
### Example Explained
**HTML)** Use a container element (like ) and add a **"tooltip"** class. The tooltip will be displayed when you move the mouse over the
.
The tooltip text is placed in an inline element (like ) with **class="tooltiptext"**.
**CSS)****tooltip** class uses **position:relative**, and the tooltip text needs to have **position:absolute**. **Note:** The following examples will show more positioning effects.
**tooltiptext** class is used for the actual tooltip text. It is hidden by default and appears when you move the mouse over the element. Some width, background color, font color, etc. styles are set.
CSS3 **border-radius** property is used to add rounded corners to the tooltip.
**:hover** selector is used to show the tooltip when the mouse moves over the
element.
* * *
## Positioning Tooltips
In the following examples, the tooltip is displayed to the right of the specified element (**left:105%**).
Note **top:-5px** is used to position it in the middle of the container element. Use the number **5** because the top and bottom padding of the tooltip text is 5px.
If you change the padding value, you should also modify the top value accordingly to ensure it is centered.
The same principle applies when the tooltip is displayed on the left side.
## Display on the right:
.tooltip.tooltiptext{top: -5 px; left:105%; }
[Try it Yourself »](#)
## Display on the left:
.tooltip.tooltiptext{top: -5 px; right:105%; }
[Try it Yourself »](#)
If you want the tooltip to appear on the top and bottom. We need to use the **margin-left** property and set it to -60px. This number is calculated by using half of the width to center it, which is: width/2 (120/2 = 60).
## Display on the top:
.tooltip.tooltiptext{width:120 px; bottom:100%; left:50%; margin-left: -60 px; }
[Try it Yourself »](#)
## Display at the bottom:
.tooltip.tooltiptext{width:120 px; top:100%; left:50%; margin-left: -60 px; }
[Try it Yourself »](#)
* * *
## Adding Arrows
We can use CSS pseudo-element ::after and content property to create a small arrow marker for the tooltip. The arrow is made up of borders, but when combined, the tooltip looks like a speech bubble.
The following example demonstrates how to add a bottom arrow to a tooltip displayed at the top:
## Top Tooltip / Bottom Arrow:
.tooltip.tooltiptext::after{content: " "; position:absolute; top:100%; left:50%; margin-left: -5 px; border-width:5 px; border-style:solid; border-color:black transparent transparent transparent; }
[Try it Yourself »](#)
### Example Explained
Positioning the arrow inside the tooltip: **top: 100%**, the arrow will appear at the bottom of the tooltip. **left: 50%** is used to center the arrow.
**Note:****border-width** property specifies the size of the arrow. If you modify it, you should also modify the **margin-left** value. This way the arrow can be centered.
**border-color** is used to convert the content into an arrow. Set the top border to black, and others to transparent. If you set others to black as well, it will display as a black quadrilateral.
The following example demonstrates how to add an arrow at the top of the tooltip, note the border color settings:
## Bottom Tooltip / Top Arrow:
.tooltip.tooltiptext::after{content: " "; position:absolute; bottom:100