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(0 2px 4px rgb(0 0 0 / 15%))
  drop-shadow(0 2px 8px rgb(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)