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)#

$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(0 2px 4px rgba(0, 0, 0, .15))
  drop-shadow(0 2px 8px rgba(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

PlaygroundBeta

  • A drag-and-drop UI builder for prototyping with Paragon components.

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)