React Suite Tooltip Follow Cursor

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 Follow Cursor. The tooltip component allows users to display informative text when users hover over, focus on, or tap an element. The follow cursor means that when the user hovers over a button, the tooltip component will follow the cursor.

Tooltip 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.
• arrow: Whether 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 followCursor 
    speaker={<Tooltip>...</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:

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Example 1: Below example demonstrates the usage of the follow cursor tooltip component.

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 Follow cursor
                </h4>
            </div>
            <div style={{
                padding: 20,
                textAlign: "center"
            }}>
                <div>
                    <Whisper
                        followCursor
                        speaker={<Tooltip>
                            Welcome to GeeksforGeeks.
                        </Tooltip>}
                    >
                        <Button>Hover</Button>
                    </Whisper>
                </div>
            </div>
        </div>
    );
}

Output:

Example 2: Below example demonstrates the usage of the follow cursor tooltip placed at bottomStart.

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 Follow cursor
                </h4>
            </div>
            <div style={{
                padding: 20,
                textAlign: "center"
            }}>
                <div>
                    <Whisper
                        followCursor
                        placement="bottomStart"
                        speaker={<Tooltip>
                            Welcome to GeeksforGeeks.
                        </Tooltip>
                        }
                    >
                        <Button>Hover</Button>
                    </Whisper>
                </div>
            </div>
        </div>
    );
}

Output:

Reference: https://rsuitejs.com/components/tooltip/#follow-cursor