HTML CSS JAVASCRIPT MySQL PHP JQUERY LIQUID

CSS Tooltip

❮ Previous Next ❯

Make pop-up tips using CSS.

Demo: Tooltip Examples

A tooltip is like a small info pop-up that appears when you hover your mouse over something. It gives you more details about that thing.

Top Tooltip text
Right Tooltip text
Bottom Tooltip text
Left Tooltip text

Basic Tooltip

Make a little pop-up message show up when someone moves their mouse over something on the screen:

Example Explained

HTML: To create a tooltip, you can use a container element such as <div> and apply the "tooltip" class to it. When a user hovers their mouse over this <div>, it will display the tooltip text.

The tooltip text is placed within a small element, such as a tag, which has the attribute class="tooltiptext".

CSS: The tooltip class uses position:relative to position the tooltip text, which is done using position:absolute. Note: You can find examples below that show how to position the tooltip.

The class called "tooltiptext" contains the real tooltip text. Initially, it's not visible, but it will appear when you hover over it (as shown below). We've also applied some simple styles to it: a width of 120 pixels, a black background, white text, centered alignment, and 5 pixels of padding at the top and bottom.

The CSS code called "border-radius" is used to make the edges of a tooltip text appear rounded.

The ":hover" selector is a way to display a tooltip when you hover your mouse over a <p> element with the class "tooltip."

Positioning Tooltips

In this example, we're putting a tooltip to the right side of some text that you can hover over. To make sure it's centered within its container, we're setting the distance from the top as top:-5px. We're using the number 5 because the tooltip text has padding of 5px on both the top and bottom. If you increase this padding, you'll need to increase the top value too, so the tooltip stays centered. This same rule applies if you want the tooltip on the left side.

If you'd like the tooltip to show up either above or below, check out the examples below. We're using the margin-left property with a value of -60 pixels. This centers the tooltip above or below the text you hover over. We set it to half of the tooltip's width (120/2 = 60).

Tooltip Arrows

To make a tooltip appear with an arrow pointing from a certain direction, you can add a "dummy" content right after the tooltip. To create the arrow, use a pseudo-element with the class ::after and set its content property. The arrow is constructed using borders. This will give the tooltip the appearance of a speech bubble.

This example shows how to include an arrow at the bottom of a tooltip:

Example Explained

To put the arrow inside the tooltip, use top: 100% to make the arrow appear at the tooltip's bottom. To center the arrow, apply left: 50%.

Please remember: The "border-width" property tells you how big the arrow is. If you adjust it, make sure to adjust the "margin-left" value to match. This will make sure the arrow stays in the middle.

The border-color property is used to change the appearance of an element to look like an arrow. We make the top border black and the other borders transparent. If we made all the borders black, the element would appear as a black square box.

In this example, we show how to put an arrow at the top of a tooltip. You'll see that we change the color of the border at the bottom:

Here's how you can put an arrow on the left side of the tooltip in this example:

This example shows how to include an arrow on the right side of the tooltip:

Fade In Tooltips (Animation)

To make the tooltip text gradually appear when it's going to show up, you can utilize CSS. Combine the transition property with opacity. Start with it being completely invisible and slowly make it 100% visible. This change will occur over a specified duration, like 1 second in our example.
❮ Previous Next ❯