Go Main page
Go Main page

Web components

cover

components

Tooltip

v.1.0.0 | Saturn

Usage

The name of the tokens object to style the tooltip component is TOOLTIP_STYLES.

You cannot change the name of the tokens object.

tooltip component has one way to modify the styles:

  • Variant: modify the styles of the Tooltip.

The structure of the TOOLTIP_STYLES object is:

Variants

Variants can modify the styles for the Tooltip.

The tokens used are:

12345678910
const TOOLTIP_STYLES = {
  [VARIANT]: {
    tooltipExternalContainer?: CommonStyleType;
    tooltipInternalContainer?: CommonStyleType;
    headerContainer?: CommonStyleType;
    title?: TypographyTypes;
    paragraph?: TypographyTypes;
    paragraphContainer?: CommonStyleType;
    closeButtonIcon?: IconTypes;
    closeButtonContainer?: CommonStyleType & { altVariant?: boolean };

Types

  • TooltipAlignType
123456
enum TooltipAlignType {
  TOP = 'top',
  RIGHT = 'right',
  BOTTOM = 'bottom',
  LEFT = 'left',
}

Example

tooltip theme object example:

12345678910
const TOOLTIP_STYLES = {
  [VARIANT]: {
    title: {
      font_variant: 'font-variant',
      font_weight: 'font-weight',
      color: 'color',
    },
    closeButtonIcon: {
      width: 'icon-width',
      height: 'icon-height',