React.js Blueprint Tooltip2 Props

Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications.

In this article, we’ll discuss React.js Blueprint Tooltip2 Props. Tooltip2 Component provides a way for users to show additional information during hover interactions as it is a lightweight popover.

React.js BluePrint Tooltip2 Props:

• content: This prop denotes that the content is displayed inside the tooltip component.
• hoverCloseDelay: This prop denotes that the content is displayed inside the tooltip component.
• hoverOpenDelay: This prop denotes that the content is displayed inside the tooltip component.
• intent: This prop denotes that the visual intent color applies to the element.
• interactionKind: This prop denotes the kind of hover interaction that triggers the display of the tooltip2 component.
• transitionDuration: This prop denotes how long the tooltip component appears/disappears transition takes in milliseconds

Syntax:

<Tooltip2/>

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npm create-react-app appname

Step 2: After creating your project folder i.e. appname, move to it using the following command:

cd appname

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

npm install @blueprintjs/core

Project Structure:

Step 4: Run the project as follows:

npm start

Example 1: The below example demonstrates the usage of content and hoverCloseDelay props.

Javascript

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;

Output:

Example 2: The below example demonstrates the renderTarget prop in Tooltip2.

Javascript

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;

Output:

Reference: https://blueprintjs.com/docs/#popover2-package/tooltip2.props