WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Tooltip


In this article, we show you how to use HTML and CSS to create tooltips.

The prompt tool is triggered after the mouse moves to the specified element. First look at the following four examples:

Tooltip

The prompt box is displayed when the mouse moves to the specified element:

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


Basic Tooltip

Create a tooltip that shows up when the client moves the mouse over an element:

Example

<style>
/* Tooltip container*/ .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; /* Dotted lines on hover elements */ } /* Tooltip text */ .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; /* Positioning*/ position: absolute; z-index: 1; } /* Show the prompt box when the mouse moves up */ .tooltip:hover .tooltiptext { visibility: visible; }
</style> <div class="tooltip">Mouse over <span class="tooltiptext">Prompt text</span> </div>
Try it Yourself »

Instance analysis

HTML) Use container elements (like <div>) And add "tooltip" class. Mouse over <div>When prompted, a prompt message is displayed.

Prompt text is placed on inline elements (e.g. <span>)And use class = "tooltiptext" .

CSS) tooltip class uses position: relative , the prompt text needs to set the positioning value position: absolute . Note: The next example will show more targeting effects.

The

tooltiptext class is used for the actual tip text. The mode is hidden and displayed when the mouse moves to the element. Set some styles such as width, background color, font color, etc.

The

CSS3 border-radius attribute is used to add rounded corners to the balloon.

: hover The selector is used to move the mouse to the specified element <div> The prompt displayed at the time.

Positioning tool

In the following example, the tooltip is displayed to the right of the specified element ( left: 105% ).

Note that top: -5px is the same as positioning in the middle of the container element. Use the number 5 because the padding at the top and bottom of the prompt text is 5px.

If you modify the padding value, the top value must also be changed accordingly, so that it can be ensured that it is centered.

This is also the case when the prompt box is displayed on the left.

Right Tooltip

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

Result:

Hover over me Tooltip text
Try it Yourself »

Left Tooltip

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

Result:

Hover over me Tooltip text
Try it Yourself »

If you need the tooltip to show up to finish everything or on the base, see models underneath. Note that we utilize the margin-left property with an estimation of short 60 pixels. This is to focus the tooltip above/underneath the hoverable content. It is set to the half of the tooltip's width (120/2 = 60).

Top Tooltip

.tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; bottom: 100%; left: 50%; margin-left: -60px; }

Result:

Hover over me Tooltip text
Try it Yourself »

Bottom Tooltip

.tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; top: 100%; left: 50%; margin-left: -60px; }

Result:

Hover over me Tooltip text
Try it Yourself »

Tooltip Arrows

To make a bolt that ought to show up from a particular side of the tooltip, include "void" content after tooltip, with the pseudo-component class ::after together with the content property. The bolt itself is made utilizing fringes. This will make the tooltip resemble a discourse bubble.

This model shows how to add a bolt to the base of the tooltip:

Bottom Arrow

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

Result:

Hover over me Tooltip text
Try it Yourself »

Top Arrow

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

Result:

Hover over me Tooltip text
Try it Yourself »

This model shows how to add a bolt to one side of the tooltip:

Left Arrow

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

Result:

Hover over me Tooltip text
Try it Yourself »

This precedent shows how to add a bolt to the directly of the tooltip:

Right Arrow

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

Result:

Hover over me Tooltip text
Try it Yourself »

Fade In Tooltips (Animation)

If you need to blur in the tooltip content when it is going to be noticeable, you can utilize the CSS3 transition property together with the opacity property, and go from being totally imperceptible to 100% unmistakable, in various determined seconds (1 second in our example):

Example

.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 100%; left: 50%; margin-left: -60px; /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */ opacity: 0; transition: opacity 1s; }
Try it Yourself »