Skip to content
Related Articles

Related Articles

React.js Blueprint Tooltip2 Props

Improve Article
Save Article
  • Last Updated : 27 Sep, 2022
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!