Windy CSS styleguide

3.16 #components.tooltip [data-tooltip]

CSS only on hover tooltip (works on desktop only).

Use data-tooltip="text" or data-tooltip-src="PHRASE" for untranslated phrase.

By default displays tooltip bellow parent component, otherwise use .tooltip-- positioning classes.

Tooltip uses ::after pseudo class so it can be combined with data-icon

<span class="btn clickable tooltip--left"
        data-tooltip="This is tooltip">Hover over me</span>

Examples

Default styling

Hover over me

:hover

Default position of tooltip

Hover over me

:hover.tooltip--left

Left position of tooltip

:hover.tooltip--right

Upper position of tooltip

:hover.tooltip--up

Upper position of tooltip

Markup

<div class="centered">
    <span class="btn clickable [modifier class]"
        data-tooltip="This is tooltip">Hover over me</span>
</div>

Source: src/css/components/data-tooltip.less, line 1