Additional information on websites is often placed in the form of tooltips when hovering, for example, to decrypt complex abbreviations or to clarify user actions. A similar front-end solution is called tooltip. It saves space on the page, allowing you to display only the basic data, but leaving the reader the opportunity to familiarize themselves with the additions if necessary. In addition to the purely informational function, tooltips can be important design elements that emphasize the overall style of the site and attract attention.
Tooltip Behavior
An element, the interaction with which causes a tooltip, is called the target.
Pop-up blocks usually contain important, but not basic, information. It is assumed that the user should become familiar with it only if he wants to. In order not to annoy, not interfere and not distract from the main content, the tooltip must meet a number of requirements:
- Smooth appearance. Accidental hovering over a target element should not be accompanied by a sharp jump of a hint. This may still be acceptable for small text blocks, but it is categorically not suitable if the tooltip is large or contains images.
- Adequate placement. The help window should not close the content that it explains, so that the user has the opportunity to match the data. In cases where the tooltip has a predominantly decorative value, this is acceptable.
- No impact on other content. Tooltips are designed to be small, barely noticeable helpers to the user, so they should not create inconvenience. The correct tooltip does not move adjacent blocks and does not go beyond the page, creating scroll bars.
- Visibility. The tooltip should be visible in its entirety; it should not overlap with other elements or hide behind the edge of the browser window.
- Ease of management. It is important that the user intuitively understands how to call up and remove tooltips, and does not experience difficulties with these actions.
Pure HTML Tooltip
The ability to create hints is embedded in the language of hypertext markup for web pages. Initially, it was intended to decipher abbreviations and complex scientific terms.
To create such a pop-up block, you need the title attribute, which is available for any HTML tag.
<p> 4,22 <i title="9 460 730 472 580 800 "> </i> , 270 . . </p> <img title=" " src="disney.jpg">
The main advantages of HTML tooltip: ease of use and the ability to use with any layout elements - from text to images. But she also has big disadvantages:
- cannot format text;
- too simple appearance that cannot be changed;
- lack of the ability to insert images.
The title HTML attribute is suitable only for small hints that do not require special design. Otherwise, itβs useful to know how to make tooltips using CSS.
CSS tooltip
You can create a beautiful custom hint block using cascading style sheets. This uses basic CSS concepts:
- absolute positioning - for pulling hints from the general document flow;
- completely hiding the block in an inactive state using the
display property; - pseudo-class
:hover , which is assigned to any element under the mouse cursor; - pseudo-elements
:before and :after , which can be used for simple hints so as not to create a separate HTML element; - animation and smooth change of properties for beautiful effects of appearance and disappearance.
All these properties are well supported by modern browsers, which ensures reliable operation of the tooltip mechanism.
The :hover pseudo- :hover , in addition to pointing the cursor, also responds to finger touches on the touch screen, which allows you to support mobile gadgets.
Block or pseudo-element
CSS-tooltip can be either a separate HTML block with its own structure, or a pseudo-element of another block. Each of these options has its pros and cons, which should be considered.
Inside a separate container, itβs much easier to manipulate content. You can place images, headers and other elements in it.
The pseudo-element allows you to get rid of extra blocks and make layout a little easier. Text content can be placed in the attribute of the target element and not worry about creating the tooltip itself, CSS will do everything. However, the pseudo-element is not well suited for a block with a complex structure. In addition, it can only be created for closing tags. You cannot attach this tooltip directly to the image.
CSS Popup
Let's create a beautifully designed tooltip with a complex structure for the star closest to us from the constellation Centaurus.
First of all, let's define HTML markup:
<h2> </h2> <ul class="stars"> <li class="star"> </li> <li class="star"> </li> <li class="star"> </li> <li class="star"> </li> <li class="star"> </li> <li class="star"> <div class="tooltip"> <img src="proxima.jpg"> Μ Μ ( . proxima β ) β , , . </div> </li> </ul>
Decorate and hide the hint block using CSS:
.star { position: relative; } .star .tooltip { display: none; position: absolute; top: 50%; transform: translateY(-50%); left: 100%; } .star .tooltip:before { ... } .star:hover .tooltip { display: block; }
The styles of the list and the tooltip itself can be any, they are omitted for brevity.
Placing a tooltip in a separate block allows you to use images inside it, format text, and even create pseudo-elements for a beautiful design.
Pseudo Element Hint
To demonstrate the creation of a tooltip in a pseudo-element, a graphical editor panel will help. Each tool is presented in the form of an icon, the purpose of which may not be clear to an inexperienced user. In order for no one to go unhappy, add icons with names to the icons.
The panel HTML will look like this:
<div class="instruments"> <div class="instrument" data-tooltip=""> <img src="brush-icon.svg"> </div> <div class="instrument" data-tooltip=""> <img src="color-fill-icon.svg"> </div> <div class="instrument" data-tooltip=" "> <img src="zoom-in-icon.svg"> </div> <div class="instrument" data-tooltip=" "> <img src="zoom-out-icon.svg"> </div> </div>
The unique name of the tool is located in the data-tooltip attribute. There is an icon inside the block, but the tooltip itself is missing in the HTML code.
Since the tooltip will contain only short explanatory text, you can use pseudo-elements so as not to clutter up the light panel.
.instrument { position: relative; color: #666; background: white; cursor: pointer; } .instrument:hover { background: #666; color: white; } .instrument:hover:after { content: attr(data-tooltip); position: absolute; left: 100%; color: #666; }
The pseudo-element appears only when you hover, so there is no need to hide it with display: block. Its location is controlled by the position and left/right/top/bottom properties. CSS provides the attr() function to obtain the target data-tooltip content element from the data-tooltip attribute. Decorative styles are omitted for brevity.
Appearance of a hint when clicking without scripts
The previously discussed tooltip mechanisms reacted to hovering over the target element and were based on the CSS :hover pseudo- :hover . In some situations, itβs preferable to open a hint when you click. A similar effect is easy to implement in JavaScript, but CSS can do the job.
Among the list of CSS pseudo-classes, there is a wonderful class :focus , available for links and input elements. Unlike :hover , which disappears as soon as the mouse cursor leaves, this pseudo-class allows you to save the state of activity of the target element. And if the input fields are semantically not very suitable for creating a tooltip, the links are fine.
Replace the list item from the first example with the link:
<a class="star" href="javascript:void(0)"> <div class="tooltip"> <img src="proxima.jpg"> Μ Μ ( . proxima β ) β , , . </div> </a>
The href attribute with the value javascript:void(0) necessary in order to prevent any browser reaction to clicking the link.
The following styles allow you to call a hint with a description of the star by click:
.star .tooltip { display: none; } .star:focus .tooltip { display: block; }
The link will keep focus until the user clicks anywhere on the page.
So, a tooltip on a site can be created in many ways, even without using JavaScript. Each of them is good, you just need to choose the most suitable for a particular situation.