Tooltip
A text tip for secondary, which replaces the default title property of an HTML element.
Import
import { Tooltip, Whisper } from 'rsuite';
<Tooltip>
Text tip.<Whisper>
Monitor triggers, wrap the outside of the listener object, and notify theTooltip
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'stab
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 |
full | boolean | The content full the container |
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';