Home
Introduction
Color Library

Components

Alert
Avatar
Badge
Button
Details
Icon
Tabs
Time-ago
Tooltip
Table

Form components

Text Input
Textarea
Checkbox
Radio
Select
Components

Tooltip

Tooltips add additional context to interactive UI elements and appear on mouse hover or keyboard focus.

Usage 

<ui:Tooltip text="This is a tooltip">
  <ui:Button>Hover me</ui:Button>
</ui:Tooltip>

Position 

<ui:Tooltip text="This is a tooltip" position="left">
  <ui:Button>Left</ui:Button>
</ui:Tooltip>
<ui:Tooltip text="This is a tooltip" position="bottom">
  <ui:Button>Bottom</ui:Button>
</ui:Tooltip>
<ui:Tooltip text="This is a tooltip" position="top">
  <ui:Button>Top</ui:Button>
</ui:Tooltip>
<ui:Tooltip text="This is a tooltip" position="right">
  <ui:Button>Right</ui:Button>
</ui:Tooltip>

Too much text 

<ui:Tooltip text="This help text too long. For important guidance, you should use something else instead - either a brief explanation below or maybe a popup that appears when you click a help button.">
  <ui:Button>Hover me</ui:Button>
</ui:Tooltip>

Component arguments 

TimeAgo 

ArgumentTypeDescription
text str Required. The text to show in the tooltip.
position str Optional. The position of the tooltip. Can be one of: top, right, bottom, or left. Default is bottom.

Components 

Component
File
Source
Tooltip
tooltip.jinja
tooltip.css