Better tooltip for better UX.
<button class="zust-btn" zust-tooltip="A compact tooltip">Tooltip</button>
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.
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>
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>
You can activate the tooltip by adding class zust-tooltip-active.
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>
