Skip to content
STYLESCAPE

Tooltip

Tooltip Top

Hover me (Top)
HTML 
<div class="ss-c-tooltip ss-c-tooltip--top" tooltip-data="Tooltip on top">
            Hover me (Top)
        </div>

Tooltip Right

Hover me (Right)
HTML 
<div class="ss-c-tooltip ss-c-tooltip--right" tooltip-data="Tooltip on right">
            Hover me (Right)
        </div>

Tooltip Bottom

Hover me (Bottom)
HTML 
<div class="ss-c-tooltip ss-c-tooltip--bottom" tooltip-data="Tooltip on bottom">
            Hover me (Bottom)
        </div>

Tooltip Left

Hover me (Left)
HTML 
<div class="ss-c-tooltip ss-c-tooltip--left" tooltip-data="Tooltip on left">
            Hover me (Left)
        </div>

Tooltip Static Top

Static Top Tooltip
HTML 
<div style="display: flex; justify-content: center; padding: 2.5rem 0">
            <div
                class="ss-c-tooltip ss-c-tooltip--top ss-c-tooltip--static"
                tooltip-data="Always visible (Top)"
            >
                Static Top Tooltip
            </div>
        </div>

Tooltip Static Right

Static Right Tooltip
HTML 
<div style="display: flex; justify-content: center; padding: 2.5rem 0">
            <div
                class="ss-c-tooltip ss-c-tooltip--right ss-c-tooltip--static"
                tooltip-data="Always visible (Right)"
            >
                Static Right Tooltip
            </div>
        </div>

Tooltip Static Bottom

Static Bottom Tooltip
HTML 
<div style="display: flex; justify-content: center; padding: 2.5rem 0">
            <div
                class="ss-c-tooltip ss-c-tooltip--bottom ss-c-tooltip--static"
                tooltip-data="Always visible (Bottom)"
            >
                Static Bottom Tooltip
            </div>
        </div>

Tooltip Static Left

Static Left Tooltip
HTML 
<div style="display: flex; justify-content: center; padding: 2.5rem 0">
            <div
                class="ss-c-tooltip ss-c-tooltip--left ss-c-tooltip--static"
                tooltip-data="Always visible (Left)"
            >
                Static Left Tooltip
            </div>
        </div>