Skip to content

Tooltips

Tooltip helper. These are pseudo based so they only work on elements that can have content.

Example

Variables

Below are the default variables, adjust any of these before you import the component.

$tooltip-background:            color("black") !default;
$tooltip-text-color:            color("white") !default;
$tooltip-font-size:             90% !default;
$tooltip-padding:               0.5rem 1rem !default;
$tooltip-arrow-height:          6px !default;
$tooltip-border-radius:         $global-radius !default;
$tooltip-transition:            opacity $animation-speed-fast ease-in-out !default;