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(0px 2px 4px rgba(0, 0, 0, 0.15)) drop-shadow(0px 2px 8px rgba(0, 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
stringAn 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'Default'right'Sets the direction the
Tooltipis positioned towards.This is generally provided by the
Overlaycomponent positioning the tooltip.arrowProps
shape{ref:func|shape{current:},element,style:}object,An
Overlayinjected set of props for positioning theTooltiparrow.This is generally provided by the
Overlaycomponent positioning the tooltip.show
boolWhether the
Overlayis shown.popper
anyA
Popper.jsconfig object passed to the the underlying popper instance.bsPrefix
stringDefault'tooltip'Overrides underlying component base CSS class name
children
nodeSpecifies the content of the
TooltipclassName
stringSpecifies class name to append to the base element
variant
stringThe visual style of the
Tooltip