Tooltip

Hover-activated UI components to display brief, contextual information

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.

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.

@use 'webcoreui/styles' as *;
@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:

<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:

<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:

API

'data-tooltip': string
'data-position': 'left' | 'right' | 'bottom'