React Suite Tooltip 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 Tooltip Hide Arrow Indicator. The tooltip component allows users to display informative text when users hover over, focus on, or tap an element. We can hide the Tooltip arrow indicator (which indicates the information shown by the popover) just by setting the arrow prop to a false state.

Tooltip Props:

• children: It is used to denote the primary content.
• classPrefix: It is used to denote the prefix of the component CSS class.
• visible: It is used to indicate whether the component is visible or not.
• arrow: It denotes whether to show the arrow indicator.

Whisper Props:

• container: It 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 delay close time.
• delayOpen: It is used to denote the delayed open time.
• enterable: It denotes whether the mouse is allowed to enter the floating layer of the popover when the trigger is set to hover.
• followCursor: It denotes whether enables speaker to follow the cursor or not.
• full: It denotes content full the container.
• 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.
• onOpen: It is a function that is triggered to open components.
• 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={<Tooltip arrow={false}>...</Tooltip>}>
  <Button>Hover</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 hiding arrow indicator.

Javascript

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

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

Output:

Example 2: Below example demonstrates the hoverable tooltip with a hidden arrow.

Javascript

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

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

Output:

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