React Suite Tooltip Whisper 方法

React Suite 是React的UI组件库，提供各种可自定义和可重用的组件。其中一个组件是Tooltip Whisper组件。Tooltip Whisper组件 是一个工具提示，可用于在用户悬停或点击元素时显示信息。它可以自定义显示各种类型的内容，如文本、图片和图标。在React中，可以通过从React Suite库导入它并在JSX代码中使用它来使用Tooltip Whisper组件。

React Suite Tooltip Whisper 方法：

open: open方法是指创建一个新的whisper会话并在两个或多个用户之间建立一个私密通信渠道的过程。
close: close方法是指结束或终止活动的whisper会话的过程，可以由发送者或接收者发起。
updatePosition: updatePosition是指通过指定新坐标来改变whisper窗口在屏幕上的位置的能力。这对于调整whisper窗口的大小和位置以更好地适应用户的偏好和屏幕布局非常有用。

语法： Whisker方法可以通过ref在Whisper组件上使用。

const whisperRef = useRef();
<Whisper ref={whisperRef} {...}>
    ...
</Whisper>

创建React应用程序并安装模块：

步骤1： 要创建一个React应用程序，您需要通过npx命令在当前存储库中安装React模块。

npx create-react-app ./

步骤2： 在创建React JS应用程序之后，使用以下命令安装所需的模块:

npm install rsuite

项目结构：

React Suite Tooltip Whisper 方法

示例1: Whisper组件是一个包装器，它接受两个子组件：触发器和扬声器。在这个示例中，Button组件被用作触发器，Tooltip组件被用作扬声器。ref属性用于创建对Whisper组件的引用，以便可以通过编程方式进行操作。当按钮被点击时，将调用handleClick函数，并在whisperRef对象上调用open方法来显示5秒钟的工具提示。

文件名 : App.js

import React from 'react'; 
import "rsuite/dist/rsuite.min.css"; 
import { useRef } from 'react'; 
import { Button, Tooltip, Whisper } from 'rsuite'; 
  
export default function App() { 
    const whisperRef = useRef(null); 
    const handleClick = () => { 
        whisperRef.current.open(5000); 
    }; 
    return ( 
        <div style={{ 
            display: 'block', width: 700, paddingLeft: 30 
        }}> 
            <h1 style={{ color: 'green' }}> 
                GeeksForGeeks 
            </h1> 
            <h3 style={{ color: 'green' }}> 
                React Suite Tooltip Whisper methods 
            </h3> 
            <Whisper 
                ref={whisperRef} 
                trigger="none"
                placement="right"
                speaker={<Tooltip >Required Text</Tooltip>}> 
                <Button appearance="subtle"
                    onClick={handleClick}> 
                    Right 
                </Button> 
            </Whisper> 
            <br /> 
            <hr /> 
        </div> 
    ); 
}

运行应用程序的步骤：

npm start

输出：

React Suite Tooltip Whisper 方法

示例2： Whisper组件是一个包装器，它接收两个子组件：触发器和扬声器。在这个示例中，Button组件被用作触发器，Tooltip组件被用作扬声器。ref属性被用来创建对Whisper组件的引用，以便可以通过编程方式对其进行操作。当按钮被点击时，调用handleClick函数，并在5秒后调用whisperRef对象上的close方法来关闭工具提示。

文件名： App.js

import React from 'react'; 
import "rsuite/dist/rsuite.min.css"; 
import { useRef } from 'react'; 
import { Button, Tooltip, Whisper } from 'rsuite'; 
  
export default function App() { 
    const whisperRef = useRef(null); 
    const handleClick = () => { 
        whisperRef.current.close(5000); 
    }; 
    return ( 
        <div style={{ 
            display: 'block', width: 700, paddingLeft: 30 
        }}> 
            <h1 style={{ color: 'green' }}> 
                GeeksForGeeks 
            </h1> 
            <h3 style={{ color: 'green' }}> 
                React Suite Tooltip Whisper methods 
            </h3> 
            <Whisper 
                ref={whisperRef} 
                trigger="none"
                placement="right"
                speaker={ 
                    <Tooltip >Required Text</Tooltip> 
                }> 
                <Button appearance="subtle"
                    onClick={handleClick}> 
                    Right 
                </Button> 
            </Whisper> 
            <br /> 
            <hr /> 
        </div> 
    ); 
}

运行应用程序的步骤：