React.js Blueprint Tooltip2 Combining with popover

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

This article will discuss React.js Blueprint Tooltip2 Combining with a popover. Tooltip2 Component provides a way for users to show additional information during hover interactions as it is a lightweight popover. The tooltip2 component can be also combined with a 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:

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

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:

Example 1: The below example demonstrates the usage of popover along with tooltip2.

Javascript

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;

Output:

Example 2: The below example demonstrates the usage of popover along with disabled tooltip2.

Javascript

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;

Output:

Reference: https://blueprintjs.com/docs/#popover2-package/tooltip2.combining-with-popover