Paragon Design System

Technical Documentation

Theme

PlaygroundBeta

npm_versionnpm Paragon package page

Tooltip

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.

<>

  {['top', 'right', 'bottom', 'left'].map((placement) => (

    <OverlayTrigger

      key={placement}

      placement={placement}

      overlay={

        <Tooltip id={`tooltip-${placement}`}>

          Tooltip on <strong>{placement}</strong>.

        </Tooltip>

      }

    >

      <Button variant="primary" className="mr-2 mb-2">Tooltip on {placement}</Button>

    </OverlayTrigger>

  ))}

</>

Light version

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

<div className="bg-dark-700 p-4">

  {['top', 'right', 'bottom', 'left'].map((placement) => (

    <OverlayTrigger

      key={placement}

      placement={placement}

      overlay={

        <Tooltip variant="light" id={`tooltip-${placement}`}>

          Tooltip on <strong>{placement}</strong>.

        </Tooltip>

      }

    >

      <Button variant="inverse-outline-brand" className="mr-2 mb-2">Tooltip on {placement}</Button>

    </OverlayTrigger>

  ))}

</div>

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-admin-portal20.26.37
frontend-app-authn20.36.21
frontend-app-course-authoring20.32.01
frontend-app-discussions20.15.019
frontend-app-gradebook19.25.41
frontend-app-learner-record20.32.01
frontend-app-learning20.28.41
frontend-app-publisher20.28.52
frontend-lib-content-components20.34.03
prospectus20.32.36
Leave feedback

Contents

All components (A-Z)