React Suite Popover <Whisper> Props

React Suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.

In this article, we’ll learn about React Suite Popover Whisper Props. The popover is used to show the popup information that is triggered on any event over the parent window. The Whisper props of popover are discussed below.

Whisper Props:

• container: This is used to set the rendering container.
• controlId: It is used to set the id on <Overlay> and aria-describedby on <Whisper>.
• delay: It is used to denote the delay Time.
• delayClose: It is used to denote the close delay Time.
• delayOpen: It is used to denote the open delay Time.
• enterable: It is used to check whether the mouse is allowed to enter the floating layer of the popover when the trigger value is set to hover.
• followCursor: It is used to enable the speaker to follow the cursor. 
• full: It is used to denote the content full of the container.
• onBlur: It is a callback function that is triggered on losing focus.
• onClick: It is a callback function that is triggered on a click event.
• onClose: It is a callback function that is triggered on closing the component.
• onEnter: It is a callback function that is triggered before the overlay transitions in.
• onEntered: It is a callback function that is triggered after the overlay finishes transitioning in.
• onEntering: It is a callback function that is triggered as the overlay begins to transition in.
• onExit: It is a callback function that is triggered right before the overlay transitions out.
• onExited: It is a callback function that is triggered after the overlay finishes transitioning out.
• onExiting: It is a callback function that is triggered as the overlay begins to transition out.
• onFocus: It is a callback function to get the focus.
• onOpen: It is a callback function that is triggered when the open component.
• placement: It is used for the placement of the component.
• preventOverflow: It is used to prevent floating element overflow.
• speaker *: It is used to display the component. Its default type is Tooltip |Popover | ReactElement.
• trigger: It is used for the triggering events.

Syntax:

<Whisper placement="top" trigger="click" speaker={
    <Popover arrow={false}>...</Popover>
}>
   ...
</Whisper>

Creating React Application And Installing Module:

Step 1: Create a React application using the given command:

npm create-react-app projectname

Step 2: After creating your project, move to it using the given command:

cd projectname

Step 3: Now Install the rsuite node package using the given command:

npm install rsuite

Project Structure: Now your project structure should look like the following:

Example 1: Below example demonstrates the placement, trigger, and speaker props of the whisper.

Javascript

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

export default function App() {
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Whisper Props</h4>
                <div style={{ marginTop: 20, width: 800 }}>
                    <Whisper
                        placement="bottom"
                        trigger="click"
                        speaker={
                            <Popover arrow={false}>
                                Hi! Geek.</Popover>
                        }
                    >
                        <Button>Click</Button>
                    </Whisper>
                </div>
            </div>
        </center>
    );
}

Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

Example 2: Below example demonstrates the onClick and followCursor props of the whisper. 

Javascript

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

export default function App() {
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Whisper Props</h4>
                <div style={{ marginTop: 20, width: 800 }}>
                    <Whisper
                        placement="bottom"
                        trigger="click"
                        followCursor={true}
                        onClick={() => {
                            alert("onClick prop is called");
                        }
                        }
                        speaker={
                            <Popover arrow={false}>
                                Hi! Geek.</Popover>
                        }
                    >
                        <Button>Click</Button>
                    </Whisper>
                </div>
            </div>
        </center>
    );
}

Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

Reference: https://rsuitejs.com/components/popover/#code-lt-whisper-gt-code