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:
The prompt box is displayed when the mouse moves to the specified element:
Create a tooltip that shows up when the client moves the mouse over an element:
Instance analysisHTML) 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 toolIn 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.
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).
To make a bolt that ought to show up from a particular side of the tooltip, include "void"
tooltip, with the pseudo-component class
::after together with the
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:
This model shows how to add a bolt to one side of the tooltip:
This precedent shows how to add a bolt to the directly of the tooltip:
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
property, and go from being totally imperceptible to 100% unmistakable, in various determined seconds
(1 second in our example):