Tooltips
Tooltips are based on hint.css. Currently they don't support html content.
Basic Usage
Add a tooltip by setting an aria-label on an element.
<button class="ui-tooltip --top" aria-label="This is my tooltip">
Next
</button>
Modifiers
.--top: Show the tooltip above the element.--right: Show the tooltip to the right of the element.--bottom: Show the tooltip below the element.--left: Show the tooltip to the left of the element.--top-left: Show the tooltip above and to the left of the element.--top-right: Show the tooltip above and to the right of the element.--bottom-left: Show the tooltip below and to the left of the element.--bottom-right: Show the tooltip below and to the right of the element.--small: Make the tooltip smaller.--medium: Make the tooltip medium sized.--large: Make the tooltip larger.--fit: Make the tooltip fit the content.--error: Make the tooltip red.--warning: Make the tooltip yellow.--info: Make the tooltip blue.--success: Make the tooltip green.--always: Show the tooltip always.--no-animate: Don't animate the tooltip.--bounce: Make the tooltip bounce.--no-arrow: Don't show the arrow
Variables
--ui-tooltip-background-color: var(--ui-color-grey-900);
--ui-tooltip-text-color: #fff;
--ui-tooltip-font-size: 0.85rem;
--ui-tooltip-line-height: 1rem;
--ui-tooltip-border-radius: var(--ui-shared-border-radius);
--ui-tooltip-padding: var(--ui-shared-padding-md);
--ui-tooltip-box-shadow: var(--ui-shared-box-shadow);