React Suite Popover Hide Arrow Indicator

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 Hide Arrow Indicator.

The popover is used to show the popup information that is triggered on any event over the parent window. We can hide the arrow indicator (which indicates the information shown by the popover) just by setting the arrow prop to a false state.

Popover Props:

• children: It is used to denote the primary content.
• classPrefix: It is used to indicate the component CSS class’s prefix.
• visible: It is used to indicate whether the component is visible or not.
• title: It is used to show the popover title.
• arrow: It is used to decide whether to show the arrow indicator.

Whisper Props:

• container: It is used to set the rendering container.
• delay: It is used to denote the delay time.
• delayHide: It is used to denote the hidden delay time.
• delayShow: It is used to show delay time.
• onBlur: It is a function that is triggered to lose focus.
• onClick: It is a function that is triggered on a click event.
• onEnter: It is a function that is triggered before the overlay transitions in.
• onEntered: It is a function that is triggered after the overlay finishes transitioning in.
• onEntering: It is a function that is triggered as the overlay begins to transition in.
• onExit: It is a function that is triggered right before the overlay transitions out.
• onExited: It is a function that is triggered after the overlay finishes transitioning out.
• onExiting: It is a function that is triggered as the overlay begins to transition out.
• onFocus: It is a function that is triggered to get focus.
• onMouseOut: It is a function that is triggered on the mouse leave event.
• placement: It is used for the placement of the component.
• preventOverflow: It is used to prevent floating element overflow.
• speaker: It is used for the displayed component.
• trigger: It is used for triggering events.

Syntax:

<Whisper speaker={
   <Popover arrow={false}>...</Popover>}>
   <Button>....</Button>
</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 usage of the Popover Hide Arrow Indicator.

Javascript

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

export default function App() {
    return (
        <div>
            <div style={
                {
                    textAlign: "center"
                }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={
                    {
                        color: "green"
                    }}>
                    React Suite Popover Hide
                    arrow Indicator
                </h4>
            </div>
            <div style={
                {
                    padding: 20,
                    textAlign: "center"
                }}>
                <div>
                    <Whisper
                        trigger="click"
                        speaker={
                            <Popover arrow={false}>
                                This is a button.
                            </Popover>
                        }>
                        <Button>Open</Button>
                    </Whisper>
                </div>
            </div>
        </div>
    );
}

Output:

Example 2: Below example demonstrates the usage of the Popover Hide Arrow indicator following the cursor.

Javascript

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

export default function App() {
    return (
        <div>
            <div style={
                {
                    textAlign: "center"
                }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={
                    {
                        color: "green"
                    }}>
                    React Suite Popover Hide
                    arrow Indicator
                </h4>
            </div>
            <div style={
                {
                    padding: 20,
                    textAlign: "center"
                }}>
                <div>
                    <Whisper
                        followCursor
                        speaker={
                            <Popover arrow={false}>
                                This is a button.
                            </Popover>}>
                        <Button>Hover</Button>
                    </Whisper>
                </div>
            </div>
        </div>
    );
}

Output:

Reference: https://rsuitejs.com/components/popover/#hide-arrow-indicator