Overview

  • The <Tooltip> component do not position itself. Instead the <Overlay> (or <OverlayTrigger>) components, inject ref and style props.
  • Tooltip expects specific props injected by the <Overlay> component
  • Tooltips for disabled elements must be triggered on a wrapper element.
  • Overlay is the fundamental component for positioning and controlling tooltip visibility. It's a wrapper around Popper.js, that adds support for transitions, and visibility toggling.

Tooltip examples

You can pass the Overlay injected props directly to the Tooltip component as shown in React Bootstrap Or pass a Tooltip element to OverlayTrigger instead.

Tooltip placement

Use placement prop on OverlayTrigger to set the position for tooltip.

Tooltip with HTML

Tooltip by default supports custom HTML.

API

OverlayTrigger

import OverlayTrigger from `@trimbleinc/modus-react-bootstrap/OverlayTrigger`
NameTypeDefaultDescription
children required
element | function
defaultShow
boolean
false

The initial visibility state of the Overlay.

delay
number | shape

A millisecond delay amount to show and hide the Overlay once triggered

flip
boolean
placement && placement.indexOf('auto') !== -1

The initial flip state of the Overlay.

onHide
null
onToggle
function
controls `show`

A callback that fires when the user triggers a change in tooltip visibility.

onToggle is called with the desired next show, and generally should be passed back to the show prop. onToggle fires after the configured delay

overlay required
function | element

An element or text to overlay next to the target.

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

The placement of the Overlay in relation to it's target.

popperConfig
object
{}

A Popper.js config object passed to the the underlying popper instance.

show
boolean
controlled by: onToggle, initial prop: defaultShow

The visibility of the Overlay. show is a controlled prop so should be paired with onToggle to avoid breaking user interactions.

Manually toggling show does not wait for delay to change the visibility.

target
null
trigger
'hover' | 'click' |'focus' | Array<'hover' | 'click' |'focus'>
['hover', 'focus']

Specify which action or actions trigger Overlay visibility

Tooltip

import Tooltip from `@trimbleinc/modus-react-bootstrap/Tooltip`
NameTypeDefaultDescription
arrowProps
{ ref: ReactRef, style: Object }

An Overlay injected set of props for positioning the tooltip arrow.

This is generally provided by the Overlay component positioning the tooltip

id required
string|number

An html id attribute, necessary for accessibility

placement
'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'
'right'

Sets the direction the Tooltip is positioned towards.

This is generally provided by the Overlay component positioning the tooltip

popper
object
show
any
bsPrefix
string
'tooltip'