React.js Blueprint Tooltip2 Combining with popover

Namachila October 14, 2025

0 0 2 minutes read

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>zambiatek</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>zambiatek</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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!