This specification defines a new value for the position property in CSS, namely "pointer".
Currently [[!HTML5]] supports the title attribute to give UI elements a tooltip, but this functionality is often provided with OS APIs for tooltips, which may or may not be sufficient or fitting for a certain application's use cases. Due to this, there are many JS libraries for providing custom tooltips for UI elements, but they're all still quite limited and/or come with a significant performance and implementation overhead.
The purpose of this specification is to provide a simple CSS setting for making elements follow the user's main pointer.
The
position property is defined in [[!CSS21]].
If the element's position is set to 'pointer', the position of the object is calculated similarly to the 'fixed' model, but instead of the position being relative to the viewport, the position of the element is relative to the position of the user's main pointer, if any.
When the element's position is set to 'pointer', the element also becomes detached from the flow of the document it is contained in, i.e. it doesn't cause reflow when it moves.
.tooltip {
position: pointer;
left: 5px;
top: 5px;
}This example would make all elements of the class 'tooltip' follow the pointer with a 5px offset both horizontally and vertically.
.tooltip {
position: pointer;
left: 5px;
top: 5px;
padding: 5px;
width: auto;
height: auto;
}
:not(:hover) + .tooltip {
display: none;
}This example would allow one to define a tooltip for elements in HTML simply by inserting a next sibling element with a class 'tooltip', while also making sure that the tooltips are visible only when the pointer is on the element. Example of such HTML:
<button>Hover over me for more info</button>
<div class="tooltip">Here's more info!</div>
Pointer in this specification refers to the main focus point of the user. This can mean multiple things, but the following list aims to define a guideline for how to find the appropriate position: