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