Tooltip

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

Import

MainIndividual
import { Tooltip, Whisper } from 'rsuite';
  • <Tooltip> Text tip.
  • <Whisper> Monitor triggers, wrap the outside of the listener object, and notify the Tooltip when the event is triggered.

Examples

Basic

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.
  • contextMenu: It will be triggered when you trigger contextMenu on the element.
  • 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> and override the pointer-events on the disabled element.

Hide arrow indicator

You can hide arrow indicator by setting arrow props to false;

Follow cursor

You can enable the Tooltip to follow the cursor by setting followCursor={true}.

Props

<Tooltip>

Property Type (Default) Description
arrow boolean (true) Whether show the arrow indicator
children * ReactNode 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 | (() => HTMLElement) Sets the rendering container
controlId string Set the id on <Overlay> and aria-describedby on <Whisper>
defaultOpen boolean Whether to open the overlay by default
delay number Delay time (ms) Time
delayClose number Delay close time (ms) Time
delayOpen number Delay open time (ms) Time
enterable boolean Whether mouse is allowed to enter the floating layer of popover,when the value of trigger is set tohover
followCursor boolean Whether enable speaker to follow the cursor
onBlur () => void Lose Focus callback function
onClick () => void Click on the callback function
onClose () => void Callback fired when close component
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
onOpen () => void Callback fired when open component
open boolean Whether to open the overlay
placement Placement ('right') Dispaly placement
preventOverflow boolean Prevent floating element overflow
speaker * Tooltip | Popover | ReactElement Displayed component
trigger Trigger (['hover','focus']) Triggering events

Whisper methods

Whisper methods are available via ref on Whisper component.

const whisperRef = useRef();

<Whisper ref={whisperRef} {...}>
  ...
</Whisper>

Available methods include

  • open

Open a overlay.

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

Close a overlay.

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

Update overlay position

updatePosition: () => void

Trigger 

type Trigger =
  | Array<'click' | 'contextMenu' | 'hover' | 'focus' | 'active'>
  | 'click'
  | 'contextMenu'
  | 'hover'
  | 'focus'
  | 'active'
  | 'none';

Placement 

type Placement =
  | 'top'
  | 'bottom'
  | 'right'
  | 'left'
  | 'bottomStart'
  | 'bottomEnd'
  | 'topStart'
  | 'topEnd'
  | 'leftStart'
  | 'leftEnd'
  | 'rightStart'
  | 'rightEnd'
  | 'auto'
  | 'autoVerticalStart'
  | 'autoVerticalEnd'
  | 'autoHorizontalStart'
  | 'autoHorizontalEnd';
Vercel banner