Tooltip

A text tip for secondary, which replaces the default title property of an HTML element.

  • <Tooltip> Text tip.
  • <Whisper> Monitor triggers, wrap the outside of the listener object, and notify the Tooltip when the event is triggered.

Usage

import { Tooltip, Whisper } from 'rsuite';

Examples

Default

Placement

  • left , top , right , bottom is in 4 directions, indicating the location of the display.
  • leftStart , A start is added to the left, and here start is a logical way, indicating that the alignment is the beginning of the Y axis.

For a description of start and end, refer to W3C first public working draft about CSS Logical Properties and Values Level 1.

Triggering events

Whisper provides a trigger props, which is used to control the display of Tooltip in different business scenarios. Props values ​​include:

  • click: It will be triggered when the element is clicked, and closed when clicked again.
  • focus: It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's tab key.
  • hover: Will be triggered when the cursor (mouse pointer) is hovering over the element.
  • active: It is triggered when the element is activated.
  • none: No trigger event, generally used when it needs to be triggered by a method.

Note: Safari ignoring tabindex

Container and prevent overflow

Disabled elements

Elements with the disabled attribute aren’t interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you’ll want to trigger the overlay from a wrapper <div> or <span>.

Props

<Tooltip>

Property Type (Default) Description
children * React.Node The content of the component.
classPrefix string ('tooltip') The prefix of the component CSS class
visible boolean The component is visible by default

<Whisper>

Property Type (Default) Description
container HTMLElement or (() => HTMLElement) Sets the rendering container
delay number Delay Time
delayHide number Hidden delay Time
delayShow number Show Delay Time
onBlur () => void Lose Focus callback function
onClick () => void Click on the callback function
onEnter () => void Callback fired before the overlay transitions in
onEntered () => void Callback fired after the overlay finishes transitioning in
onEntering () => void Callback fired as the overlay begins to transition in
onExit () => void Callback fired right before the overlay transitions out
onExited () => void Callback fired after the overlay finishes transitioning out
onExiting () => void Callback fired as the overlay begins to transition out
onFocus () => void Callback function to get focus
onMouseOut () => void Mouse leave callback function
placement enum: PlacementAll ('right') Dispaly placement
preventOverflow boolean Prevent floating element overflow
speaker * union: Tooltip, Popover Displayed component
trigger union: 'click', 'hover', 'focus', 'active', 'none' (['hover','focus']) Triggering events

Whisper methods

  • open

Display a Tooltip.

open: (delay?: number) => void
  • close

Hide a Tooltip.

close: (delay?: number) => void

Related components