HomeGeneralHelpersElementsContainerFormComponents

GeneralGetting StartedThemeBreakpointsCustomization SCSSVariablesBuild a ThemeBuild Variants

HelpersGeneralColorText

ElementsAvatarButtonChipDividerIconNote BlockProgressSpinnerTableTooltip

ContainerBasicColumnElement GroupSnap Container

FormBasicsCheckboxInputRadioRangeSelectSwitchTextarea

ComponentsBadgeBreadcrumbCardDropdownModalNavNavbarPaginationPlaceholderRaw ProgressTabs

Tooltip

Better tooltip for better UX.

Structure

<button class="zust-btn" zust-tooltip="A compact tooltip">Tooltip</button>

Usage

You can use this tooltip simply by adding attribute zust-tooltip and setting this attribute's value to tooltip text. This works in almost every elements.

Positions

To set position of tooltip add attribute zust-tooltip-position="position".

The positions are top, bottom, left, right, top-left, top-right, bottom-left, bottom-right.

<button class="zust-btn" zust-tooltip="Is this a Tooltip? (O_o)" zust-tooltip-position="top">Tooltip</button>

Colors

You can set tooltip color to any of theme color. Add attribute zust-tooltip-type="theme-color-name".

<button class="zust-btn" zust-tooltip="You're successful in making tooltip" zust-tooltip-type="success" zust-tooltip-position="bottom-left">Success Tooltip</button>

Custom activation

You can activate the tooltip by adding class zust-tooltip-active.

Visibility based on breakpoint

You can set visibility tooltip based on breakpoint, Your tooltip will be only visible on that breakpoint. For this add attribute zust-tooltip-visibility="breakpoint-name". Get breakpoint names from Here.

<button class="zust-btn" zust-tooltip-visibility="small" zust-tooltip="So, You're using small device right now? Are you using Web Inspector? Thinking......" zust-tooltip-position="top-left">Small Breakpoint Tooltip 🤔</button>