Paragon Design System

Technical Documentation

npm_version
Changelog
GitHub

Tooltip

Tooltips display informative text when users hover over, focus on, or tap an element.

Basic Usage

Light version

Theme Variables (SCSS)#



// Tooltips


$tooltip-font-size:                 $font-size-sm !default;
$tooltip-max-width:                 200px !default;
$tooltip-color:                     $white !default;
$tooltip-bg:                        $black !default;
$tooltip-border-radius:             $border-radius !default;
$tooltip-opacity:                   1 !default;
$tooltip-padding-y:                 .5rem !default;
$tooltip-padding-x:                 .5rem !default;
$tooltip-margin:                    0 !default;
$tooltip-box-shadow:                drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.15)) drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.15))!default;


$tooltip-arrow-width:               .8rem !default;
$tooltip-arrow-height:              .4rem !default;
$tooltip-arrow-color:               $tooltip-bg !default;


$tooltip-color-light:               $black !default;;
$tooltip-bg-light:                  $white !default;
$tooltip-arrow-color-light:         $white !default;
Tooltip Props API
  • id
    string

    An html id attribute, necessary for accessibility.

  • placement
    enum'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start'

    Sets the direction the Tooltip is positioned towards.

    This is generally provided by the Overlay component positioning the tooltip.

    Default'right'
  • arrowProps
    shape {
    ref: func | shape {
    current: element,
    }    ,
    style: shape {},
    }

    An Overlay injected set of props for positioning the Tooltip arrow.

    This is generally provided by the Overlay component positioning the tooltip.

  • show
    bool

    Whether the Overlay is shown.

  • popper
    shape {}

    A Popper.js config object passed to the the underlying popper instance.

  • bsPrefix
    string

    Overrides underlying component base CSS class name

    Default'tooltip'
  • children
    node

    Specifies the content of the Tooltip

  • className
    string

    Specifies class name to append to the base element

  • variant
    string

    The visual style of the Tooltip

Contents

Guides

Foundations

Components

Buttonlike
Choreography
Content
Forms
Forms (deprecated)
Hooks
Imagery & Iconography
Layout
Navigation
Overlays
Status & metadata
Table

All components (A-Z)