Search documentation v0.6.1

Tooltip

Hover-activated UI components to display brief, contextual information

Source ↗️ Report Issue ↗️

Use tooltips attached to elements for providing additional information without cluttering the interface. They are triggered on hover, and can be configured to be shown in different positions.

Preview

Hover me

To use tooltips, make sure you don’t have the includeTooltip option set to false in your CSS configuration. This is automatically set to true by default.

@import 'webcoreui/styles';
@include setup((
...
includeTooltip: true
));
<p data-tooltip="Tooltip content">Hover me</p>

Tooltips can be created using the data-tooltip attribute. This makes it possible to attach a tooltip to any element or component without extra imports or setups.

Positions

By default, tooltips are shown at the top of an element. You can change the positioning using the data-position attribute:

Left
Right
Bottom
<span data-tooltip="Left tooltip" data-position="left">Left</span>
<span data-tooltip="Right tooltip" data-position="right">Right</span>
<span data-tooltip="Bottom tooltip" data-position="bottom">Bottom</span>

Styles

The style of the tooltips can be configured by overriding the following CSS variables:

html body {
--w-tooltip-background: #FFF;
--w-tooltip-color: #000;
}

If you need to override the style of an individual tooltip, simply pass a style attribute to the element with the CSS variables:

Hover me
<span
data-tooltip="Custom colors"
style={[
'--w-tooltip-background: #10ac84',
'--w-tooltip-color:#000'
].join(';')}
>
Hover me
</span>

Long Tooltips

Tooltips have a maximum width. When longer sentences are inserted, the tooltips are displayed in the following way:

Top
Left
Right
Bottom

API

'data-tooltip': string
'data-position': 'left' | 'right' | 'bottom'
PropPurpose
data-tooltip Sets the tooltip content.
data-position Sets the position of the tooltip. Defaults to top.

Request improvement for this page