Tooltip

Tooltip component is a label that appears when the user hovers over an element with the cursor or with the keyboard. It can also appear triggered by specific actions — scroll, click, etc.

Usually, tooltip should not have more than a few short sentences of text.

Text inside the tooltip changes according to side property:

  • left side - left text alignment
  • center - center text alignment
  • right side - left text alignment (note that text never flows from the right!).
Member Profile
Member Profile
Member Profile
Member Profile
Member Profile
Member Profile
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere tristique lectus, porta ultrices odio ornare ac. Duis a neque suscipit, accumsan ipsum vitae, ultrices orci.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere tristique lectus, porta ultrices odio ornare ac. Duis a neque suscipit, accumsan ipsum vitae, ultrices orci.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere tristique lectus, porta ultrices odio ornare ac. Duis a neque suscipit, accumsan ipsum vitae, ultrices orci.

Specifications

// Base

$tooltip-border-radius:               radius(default);
$tooltip-background-color:            palette(cp1);
$tooltip-padding:                     unit(2);
$tooltip-margin:                      unit(1);
$tooltip-arrow-size:                  unit(2);
$tooltip-max-width:                   unit(64);

// Sides

$tooltip-left-side-text-alignment:    left;
$tooltip-center-side-text-alignment:  center;
$tooltip-right-side-text-alignment:   left;

// Text

$tooltip-text-type:                   'caption';
$tooltip-text-theme:                  'inverse';

API

name type default
orientation top / bottom bottom
side left / center / right left
text string ’’