Tooltips

Basic

Default Tooltips will appear to top of the element and center aligned to it.

Regular This is a sample of regular tooltips with top-center alignment.

Constrained This is a sample of constrained tooltips with top-center alignment.

Top Left Tooltips will appear to top of the element and stick to left of it.

Regular This is a sample of regular tooltips with top-left alignment.

Constrained This is a sample of constrained tooltips with top-left alignment.

Top Right Tooltips will appear to top of the element and stick to right of it.

Regular This is a sample of regular tooltips with top-right alignment.

Constrained This is a sample of constrained tooltips with top-right alignment.

Bottom Tooltips will appear to bottom of the element and center aligned to it.

Regular This is a sample of regular tooltips with bottom-center alignment.

Constrained This is a sample of constrained tooltips with bottom-center alignment.

Bottom Left Tooltips will appear to bottom of the element and stick to left of it.

Regular This is a sample of regular tooltips with bottom-left alignment.

Constrained This is a sample of constrained tooltips with bottom-left alignment.

Bottom Right Tooltips will appear to bottom of the element and stick to right of it.

Regular This is a sample of regular tooltips with bottom-right alignment.

Constrained This is a sample of constrained tooltips with bottom-right alignment.

Right Tooltips will appear to right side of the element.

Regular This is a sample of regular tooltips with center-right alignment.

Constrained This is a sample of constrained tooltips with center-right alignment.

Left Tooltips will appear to left side of the element.

Regular This is a sample of regular tooltips with center-left alignment.

Constrained This is a sample of constrained tooltips with center-left alignment.

Documentation

Base Structure Tooltips are simple, you just need the base structure and add extra classes for special alignment.

<!-- Base Structure -->
<div
	class="sui-tooltip"
	data-tooltip="Tooltip content goes here"
>
	Element content
</div>

Variations Sample code to position your tooltips based on design requirements.
In case you have some doubts on what you need, go to "Samples" tab and take a look at the different tooltip variations.

Top Tooltips

<!-- POSITION: Top Center -->
<div
	class="sui-tooltip"
	data-tooltip="Tooltip content goes here"
>
	Element content
</div>

<div
	class="sui-tooltip sui-tooltip-top"
	data-tooltip="Tooltip content goes here"
>
	Element content
</div>

<!-- POSITION: Top Left -->
<div
	class="sui-tooltip sui-tooltip-top-left"
	data-tooltip="Tooltip content goes here"
>
	Element content
</div>

<!-- POSITION: Top Right -->
<div
	class="sui-tooltip sui-tooltip-top-right"
	data-tooltip="Tooltip content goes here"
>
	Element content
</div>

Bottom Tooltips

<!-- POSITION: Bottom Center -->
<div
	class="sui-tooltip sui-tooltip-bottom"
	data-tooltip="Tooltip content goes here"
>
	Element content
</div>

<!-- POSITION: Bottom Left -->
<div
	class="sui-tooltip sui-tooltip-bottom-left"
	data-tooltip="Tooltip content goes here"
>
	Element content
</div>

<!-- POSITION: Bottom Right -->
<div
	class="sui-tooltip sui-tooltip-bottom-right"
	data-tooltip="Tooltip content goes here"
>
	Element content
</div>

Left Tooltip

<!-- POSITION: Center Left -->
<div
	class="sui-tooltip sui-tooltip-left"
	data-tooltip="Tooltip content goes here"
>
	Element content
</div>

Right Tooltip

<!-- POSITION: Center Right -->
<div
	class="sui-tooltip sui-tooltip-right"
	data-tooltip="Tooltip content goes here"
>
	Element content
</div>

Constrained There are cases when you need tooltips with an specific width.

<!-- Constrained: Default Width -->
<button
	class="sui-button sui-constrained"
	data-tooltip=""
>
	Default
</button>

<!-- Constrained: Custom Width -->
<button
	class="sui-button sui-constrained"
	style="--tooltip-width: 170px;"
	data-tooltip=""
>
	Default
</button>

Special Fixes You can further modify tooltips using the following inline styles.

<!-- Tooltips Width -->
<button
	class="sui-button"
	style="--tooltip-width: 170px;"
	data-tooltip=""
>
	Default
</button>

<!-- Tooltips Width (Small Screens Only) -->
<button
	class="sui-button sui-button-mobile"
	style="--tooltip-width-mobile: 170px;"
	data-tooltip=""
>
	Default
</button>

<!-- Tooltips Text Align -->
<button
	class="sui-button"
	style="--tooltip-text-align: left;"
	data-tooltip=""
>
	Default
</button>