React.js蓝图Tooltip2的Props

蓝图是一个基于React的用于Web的UI工具包。这个库非常优化并且在构建复杂且数据密集的桌面应用程序界面方面非常流行。

在这篇文章中，我们将讨论React.js蓝图Tooltip2的Props。Tooltip2组件提供了一种在悬停交互期间显示额外信息的方式，因为它是一个轻量级的弹出窗口。

React.js蓝图Tooltip2的Props：

content： 这个Prop表示内容显示在Tooltip组件内部。
hoverCloseDelay： 这个Prop表示内容显示在Tooltip组件内部。
hoverOpenDelay： 这个Prop表示内容显示在Tooltip组件内部。
intent： 这个Prop表示视觉意图颜色应用于元素。
interactionKind： 这个Prop表示触发Tooltip2组件显示的悬停交互的类型。
transitionDuration： 这个Prop表示Tooltip组件出现/消失的过渡持续时间，以毫秒为单位。

语法：

<Tooltip2/>

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

步骤1： 使用以下命令创建一个React应用程序：

npm create-react-app appname

步骤2： 在创建项目文件夹即appname之后，使用以下命令进入该文件夹：

cd appname

步骤3 ：创建ReactJS应用程序后，使用以下命令安装所需的模块：

npm install @blueprintjs/core

项目结构：

React.js蓝图Tooltip2的Props

步骤4 ：按照以下方式运行项目：

npm start

示例1: 下面的示例演示了content和hoverCloseDelay属性的用法。

import React from "react"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
import { Button } from "@blueprintjs/core"; 
import { Tooltip2 } from "@blueprintjs/popover2"; 
  
function App() { 
  
    const jsxContent = ( 
        <em> 
            This is a simple tooltip 
        </em> 
    ); 
  
    return ( 
        <center> 
            <div style={{ padding: 20,  
                textAlign: "center", color: "green" }}> 
                <h1>ReactJS BluePrint Tooltip2 Props</h1> 
            </div> 
            <div style={{ padding: 20 }}> 
                <Tooltip2 
                    content={jsxContent} 
                    hoverCloseDelay={100} 
                    renderTarget={({ 
                        isOpen: isTooltipOpen, 
                        ref: ref2, 
                        ...tooltipProps 
                    }) => ( 
                        <Button 
                            {...tooltipProps} 
                            text="Hover me"
                        /> 
                    )} 
                /> 
            </div> 
        </center> 
    ); 
} 
  
export default App;

输出:

React.js蓝图Tooltip2的Props

示例2: 下面的示例演示了Tooltip2中的renderTarget属性。

import React from "react"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
import { Button, mergeRefs } from "@blueprintjs/core"; 
import { Tooltip2 } from "@blueprintjs/popover2"; 
  
function App() { 
    const jsxContent = ( 
        <em> 
            You just hovered! 
        </em> 
    ); 
  
    return ( 
        <center> 
            <div style={{ padding: 20,  
                  textAlign: "center", color: "green" }}> 
                <h1>ReactJS BluePrint Tooltip2 Props</h1> 
            </div> 
            <div style={{ padding: 20 }}> 
                <Tooltip2 
                    content={jsxContent} 
                    renderTarget={({ 
                        isOpen: isTooltipOpen, 
                        ref: ref2, 
                        ...tooltipProps 
                    }) => ( 
                        <Button 
                            {...tooltipProps} 
                            elementRef={mergeRefs(ref2)} 
                            text="Hover"
                        /> 
                    )} 
                /> 
            </div> 
        </center> 
    ); 
} 
  
export default App;

输出：

React.js蓝图Tooltip2的Props