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);