Tooltip

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

Basic Usage

Show editable code example

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>
  ))}
</>

<>
  {['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

Show editable code example

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>

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

Usage Insights#

Tooltip

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	20.26.3	7
frontend-app-authn	20.34.0	1
frontend-app-course-authoring	20.32.0	1
frontend-app-discussions	20.15.0	19
frontend-app-gradebook	19.25.4	1
frontend-app-learner-record	20.28.4	1
frontend-app-learning	20.28.4	1
frontend-app-publisher	20.28.5	2
frontend-lib-content-components	20.32.0	3
prospectus	20.28.3	6

Paragon Design System

Theme

PlaygroundBeta

Tooltip

Basic Usage

Light version

Theme Variables (SCSS)#

Props API#

Usage Insights#

Tooltip

All components (A-Z)

Theme

PlaygroundBeta

Tooltip

Basic Usage#

Light version#

Theme Variables (SCSS)#

Props API#

Usage Insights#

Tooltip

All components (A-Z)

Basic Usage

Light version