React Suite Tooltip Whisper methods

Question

import React from 'react';
import "rsuite/dist/rsuite.min.css";
import { useRef } from 'react';
import { Button, Popover, Whisper } from 'rsuite';

export default function App() {
    const whisperRef = useRef(null);
    const handleclick = () => {
        whisperRef.current.open(5000);
      };
    return (
        <div style={{
            display: 'block', width: 700, paddingLeft: 30,marginTop:50
        }}>
            <Whisper ref={whisperRef} 
                trigger="click"
                placement="right"
                speaker={<Popover>Required Text</Popover>}
            >
                <Button appearance="subtle" onClick={handleclick}>Right</Button>
            </Whisper>
            <br />
            <hr />
        </div>
    );
}

I am trying to use the open method of the whisper component via using the handleclick function in button component which should delay the opening of Tooltip by 5 milliseconds but the output shows the tooltip component immediately after clicking it . Kindly check this documentation for more understanding. Hope to resolve this problem

score 0 · Answer 1 · answered Apr 20 '23 at 03:24

You can use delay prop.

const App = () => (
  <Whisper
    trigger="click"
    delay={5000}
    speaker={(props, ref) => {
      const { className, left, top, onClose } = props;
      return <Overlay style={{ left, top }} onClose={onClose} className={className} ref={ref} />;
    }}
  >
    <Button>Open</Button>
  </Whisper>
);

React Suite Tooltip Whisper methods

1 Answers1