
components
Tooltip
v.1.0.0 | SaturnUsage
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:
- tooltipExternalContainer?: CommonStyleType;
- tooltipInternalContainer?: CommonStyleType;
- headerContainer?: CommonStyleType;
- title?: TypographyTypes;
- paragraph?: TypographyTypes;
- paragraphContainer?: CommonStyleType;
- closeButtonIcon?: IconTypes;
- closeButtonContainer?: CommonStyleType & { altVariant?: boolean };
- divider?: CommonStyleType;
- tooltipAsModal?: boolean;
- popoverVariant?: { [DeviceBreakpointsType.DESKTOP]?: string; [DeviceBreakpointsType.TABLET]?: string; [DeviceBreakpointsType.MOBILE]?: string; }; showOverlay?: { [DeviceBreakpointsType.DESKTOP]?: boolean; [DeviceBreakpointsType.TABLET]?: boolean; [DeviceBreakpointsType.MOBILE]?: boolean; };
- arrowContainer?: CommonStyleType & { arrow_size?: string; arrow_position?: string };
- arrow?: CommonStyleType;
- dragIconContainer?: CommonStyleType;
- dragIcon?: IconTypes;
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',