Paragon Design System

Theme

Overlays
npm_versionnpm Paragon package page

Tooltip

Edit this pagein a new tabLeave feedbackin a new tab

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

Basic Usage

Any Paragon component or export may be added to the code example.

Light version

Any Paragon component or export may be added to the code example.

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;

Props API#

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

Usage Insights#

Tooltip

Project NameParagon VersionInstance Count
frontend-app-account20.46.31
frontend-app-admin-portal20.46.39
frontend-app-authn20.46.21
frontend-app-course-authoring21.5.69
frontend-app-discussions20.46.319
frontend-app-gradebook20.45.01
frontend-app-learner-portal-enterprise20.45.41
frontend-app-learner-record20.46.31
frontend-app-learning20.46.01
frontend-app-publisher20.46.32
frontend-component-header-edx21.5.61
frontend-component-header21.5.61
frontend-lib-content-components21.5.63
prospectus20.46.28
Edit this pagein a new tabLeave feedbackin a new tab

Contents

All components (A-Z)