React.js Blueprint Tooltip2与弹出框的结合

Blueprint 是一个基于React的Web用户界面工具包。该库非常优化，用于构建复杂和数据密集的桌面应用程序界面。

本文将讨论React.js Blueprint Tooltip2与弹出框的结合。Tooltip2组件提供了一种在悬停交互期间显示附加信息的方式，因为它是一个轻量级的弹出框。Tooltip2组件还可以与弹出框结合使用。

React.js Blueprint Tooltip2属性：

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

语法：

<Popover2 ...
    <Tooltip2 ...
        <Button text="Click" />
    )} />
)} />;

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

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

npm create-react-app appname

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

cd appname

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

npm install @blueprintjs/core

项目结构:

React.js Blueprint Tooltip2与弹出框的结合

示例1： 下面的示例演示了如何使用弹出窗口和工具提示2。

import React from "react"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
import { Button, mergeRefs } from "@blueprintjs/core"; 
import { Popover2, Tooltip2 } from "@blueprintjs/popover2"; 
  
function App() { 
    return ( 
        <center> 
            <div style={{  
                padding: 20,  
                textAlign: "center",  
                color: "green" 
            }}> 
                <h1>GeeksforGeeks</h1> 
                <h2> 
                    ReactJS BluePrint Tooltip2  
                    Combining with popover 
                </h2> 
            </div> 
            <div style={{ padding: 20 }}> 
                <Popover2 
                    content={ 
                        <div 
                            style={{ 
                                backgroundColor: "green", 
                                color: "white", 
                                borderRadius: 10, 
                            }} 
                        > 
                            <h1>I'm a Popover!</h1> 
                        </div> 
                    } 
                    renderTarget={({ 
                        isOpen: isPopoverOpen, 
                        ref: ref1, 
                        ...popoverProps 
                    }) => ( 
                        <Tooltip2 
                            content="I'm a Tooltip!" 
                            disabled={isPopoverOpen} 
                            openOnTargetFocus={false} 
                            renderTarget={({ 
                                isOpen: isTooltipOpen, 
                                ref: ref2, 
                                ...tooltipProps 
                            }) => ( 
                                <Button 
                                    {...popoverProps} 
                                    {...tooltipProps} 
                                    active={isPopoverOpen} 
                                    elementRef={mergeRefs(ref1, ref2)} 
                                    text="Hover and click"
                                /> 
                            )} 
                        /> 
                    )} 
                /> 
            </div> 
        </center> 
    ); 
} 
  
export default App;

输出：

React.js Blueprint Tooltip2与弹出框的结合

示例2： 以下示例演示了在禁用的提示工具2的情况下使用弹出框的用法。

import React from "react"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
import { Button, mergeRefs } from "@blueprintjs/core"; 
import { Popover2, Tooltip2 } from "@blueprintjs/popover2"; 
  
function App() { 
  
    return ( 
        <center> 
            <div style={{  
                padding: 20,  
                textAlign: "center",  
                color: "green" 
            }}> 
                <h1>GeeksforGeeks</h1> 
                <h2> 
                    ReactJS BluePrint Tooltip2  
                    Combining with popover 
                </h2> 
            </div> 
            <div style={{ padding: 20 }}> 
                <Popover2 
                    content={ 
                        <div style={{  
                            backgroundColor: 'green',  
                            color: 'white',  
                            borderRadius: 10  
                        }}> 
                            <h1> 
                                I'm a Popover! Tooltip  
                                is disabled. 
                            </h1> 
                        </div> 
                    } 
                    renderTarget={({ 
                        isOpen: isPopoverOpen, 
                        ref: ref1, 
                        ...popoverProps 
                    }) => ( 
                        <Tooltip2 
                            content="I'm a Tooltip!" 
                            disabled={true} 
                            openOnTargetFocus={false} 
                            renderTarget={({ 
                                isOpen: isTooltipOpen, 
                                ref: ref2, 
                                ...tooltipProps 
                            }) => ( 
                                <Button 
                                    {...popoverProps} 
                                    {...tooltipProps} 
                                    active={isPopoverOpen} 
                                    elementRef={mergeRefs(ref1, ref2)} 
                                    text="Hover and click"
                                /> 
                            )} 
                        /> 
                    )} 
                /> 
            </div> 
        </center> 
    ); 
} 
  
export default App;

输出:

React.js Blueprint Tooltip2与弹出框的结合