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 theTooltipwhen the event is triggered.
Usage
import { Tooltip, Whisper } from 'rsuite';Examples
Default
Placement
left,top,right,bottomis 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'stabkey.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.
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', 'contextMenu', '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