CSS Tooltip

Generate tooltips using CSS.

Demo: Tooltip Examples

A tooltip is commonly utilized to provide additional details about an item when the user hovers the mouse pointer over an element.

Basic Tooltip

Generate a tooltip that is displayed when the user hovers over an element with their mouse.

Example 

Example Explained

HTML: Apply the “tooltip” class to a container element (such as <div>). When the user hovers over this <div>, the tooltip text will be displayed.

The tooltip text is enclosed within an inline element (like <span>) with the class “tooltiptext”.

CSS: The “tooltip” class utilizes position:relative, necessary for positioning the tooltip text (position:absolute). Refer to the examples below for tooltip positioning.

The “tooltiptext” class contains the actual tooltip text, initially hidden, becoming visible upon hover (see below). Basic styles have been applied: 120px width, black background color, white text color, centered text, and 5px padding on top and bottom.

The CSS border-radius property is utilized to create rounded corners for the tooltip text.

The :hover selector triggers the display of the tooltip text when the user hovers over the <div> with the class="tooltip".

Positioning Tooltips

In this instance, the tooltip is positioned to the right of the “hoverable” text (<div>) with the use of left:105%. Additionally, top:-5px is employed to center it within its container element. The value 5 is utilized because the tooltip text has a padding of 5px both at the top and bottom. If you adjust the padding, ensure to modify the top property accordingly to maintain its centered position. This principle also applies if you opt to position the tooltip to the left.

Right Tooltip

Left Tooltip

If you prefer the tooltip to be displayed either above or below, refer to the examples below. Notice that we employ the margin-left property with a value of negative 60 pixels. This ensures the tooltip is centered above/below the hoverable text. The value is set to half of the tooltip’s width (120/2 = 60).

Top Tooltip

Bottom Tooltip

Tooltip Arrows

To incorporate an arrow that extends from a particular side of the tooltip, insert an “empty” content after the tooltip using the pseudo-element class ::after along with the content property. The arrow design is achieved using borders, creating a visual reminiscent of a speech bubble.

The following example illustrates how to include an arrow at the bottom of the tooltip:

Bottom Arrow

Example Explained

To position the arrow within the tooltip, setting top: 100% will align the arrow at the bottom of the tooltip, while left: 50% centers the arrow horizontally.

Please note: Adjust the border-width property to match the size of the arrow, and ensure that the margin-left value corresponds accordingly. This maintains the arrow centered.

Utilize the border-color property to define the appearance of the arrow. In this case, the top border is set to black while the rest are transparent. If all borders were black, it would result in a solid black square.

This example illustrates the addition of an arrow to the top of the tooltip. Observe that this time, the bottom border color is specified:

Top Arrow

Here’s an example showcasing how to incorporate an arrow on the left side of the tooltip:

Left Arrow

Here’s an example illustrating how to include an arrow on the right side of the tooltip:

Right Arrow

Fade In Tooltips (Animation)

To achieve a smooth fade-in effect for the tooltip text as it becomes visible, you can utilize the CSS transition property in conjunction with the opacity property. Transitioning from fully transparent to 100% opacity can be accomplished over a specified duration, such as one second in our example.

Example