React Suite Tooltip Triggering events

React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. 

The tooltip component allows the user to display informative text when users hover over, focus on, or tap an element. The tooltip props are used to add property values to the tooltip element. There are different props for tooltip for users to design it accordingly. 

 Tooltip Triggering events:

• click: It will be triggered when the element is clicked and closed when clicked again.
• contextMenu: It will be triggered when the user triggers contextMenu on the element. 
• hover: Show a tooltip if the user hovers on the required element.
• focus: Show the tooltip if the user clicks on it or selects it through the "tab" key
• active: Show the tooltip if the required element activates.
• none: Show a tooltip on a specific function.

Approach: Let us create a React project and install React Suite module. Then we will create a UI that will showcase React Suite Tooltip Triggering Events.

Creating React Project:

Step 1: To create a react app, you need to install react modules through npx command. "npx" is used instead of "npm" because you will be needing this command in your app's lifecycle only once.

npx create-react-app project_name

Step 2: After creating your react project, move into the folder to perform different operations.

cd project_name

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install rsuite

Project Structure: After running the commands mentioned in the above steps, if you open the project in an editor you can see a similar project structure as shown below. The new component user makes or the code changes, we will be performing will be done in the source folder.

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

npm start

Example 1: We are creating a UI that shows different React Suite Tooltip Triggering Events.

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

export default function App() {

    const My_tooltip = (
        <Tooltip>
            Hi Geek!! .
        </Tooltip>
    );

    return (
        <div style={{ margin: 100, textAlign: "center" }}>
            <h3 style={{ color: 'green' }}>
                GeeksforGeeks
            </h3>
            
            <h3>React Suite Tooltip Triggering Events</h3>
            <br /><br />
            
            <Whisper controlId="control-id-click" 
                trigger="click" speaker={My_tooltip}>
                <Button>Click Trigger</Button>
            </Whisper><br /><br />
            
            <Whisper controlId="control-id-context-menu" 
                trigger="contextMenu"
                speaker={My_tooltip}>
                <Button>ContextMenu Trigger</Button>
            </Whisper><br /><br />
            
            <Whisper controlId="control-id-hover" trigger="hover"
                speaker={My_tooltip}>
                <Button>Hover Trigger</Button>
            </Whisper> <br /><br />
            <Whisper controlId="control-id-focus" trigger="focus"
                speaker={My_tooltip}>
                <Button>Focus Trigger</Button>
            </Whisper> <br /><br />
            <Whisper controlId="control-id-active" trigger="active"
                speaker={My_tooltip}>
                <Button>Active Trigger</Button>
            </Whisper>
        </div>
    );
} 

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 2: We are creating a UI that shows React Suite Tooltip Triggering Events. The below example demonstrates the combination of  “click” and “contextMenu” triggers and also the "none" trigger.

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

export default function App() {
    const My_tooltip = (
        <Tooltip>
            Hi Geek!! .
        </Tooltip>
    );

    return (
        <div style={{ margin: 100, textAlign: "center" }}>
            <h3 style={{ color: 'green' }}>GeeksforGeeks</h3>
            <h3>React Suite Tooltip Triggering Events</h3><br /><br />
            <Whisper controlId="control-id-click"
                trigger={['click', 'contextMenu']} speaker={My_tooltip}>
                <Button>Right & Left CLick Trigger</Button>
            </Whisper><br /><br />
            <Whisper controlId="control-id-click"
                trigger="none" speaker={My_tooltip}>
                <Button>None Trigger</Button>
            </Whisper>
        </div>
    );
} 

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Reference: https://rsuitejs.com/components/tooltip/#triggering-events