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