ReactJS Blueprint Tooltip Component

Last Updated : 08 Apr, 2022

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

Tooltip Component provides a way for users to show additional information during hover interactions as this is a lightweight popover. We can use the following approach in ReactJS to use the ReactJS Blueprint Tooltip Component.

Tooltip Props:

autoFocus: It is used to indicate whether overlay should acquire application focus when it first opens or not.
boundary: It is used to determine the boundary elements used by Popper for its flip and preventOverflow modifiers.
canEscapeKeyClose: It is used to indicate whether pressing the esc key should invoke onClose or not.
captureDismiss: When the user clicks inside a Classes.POPOVER_DISMISS element will only close the current popover and not the outer popovers when this is set to true.
className: It is used to denote a space-delimited list of class names to pass along to a child element.
content: It is used to denote the content that will be displayed inside the tooltip.
defaultIsOpen: It is used to denote the initial opened state when uncontrolled.
disabled: It is used to prevent the popover from appearing when true.
enforceFocus: It is used to indicate whether the overlay should prevent focus from leaving itself or not.
hoverCloseDelay: It is used to denote the amount of time the tooltip should remain open after the user hovers off the trigger in milliseconds.
hoverOpenDelay: It is used to denote the amount of time the tooltip should wait before opening after the user hovers over the trigger in milliseconds.
inheritDarkTheme: It is used to indicate whether a popover that uses a Portal should automatically inherit the dark theme from its parent or not.
intent: It is used to denote the visual intent color to apply to element.
interactionKind: It is used to denote the kind of hover interaction that triggers the display of the tooltip.
isOpen: It is used to indicate whether the popover is visible or not.
lazy: The Portal containing the children is created and attached to the DOM when the overlay is opened for the first time when this is set to true and usePortal={true}.
minimal: It is used to indicate whether to apply minimal styling to this popover or tooltip or not.
modifiers: It is used to denote the popper modifier options, passed directly to the internal Popper instance.
onClose: It is a callback function that is triggered when user interaction causes the overlay to close, such as clicking on the overlay or pressing the esc key.
onClosed: It is used to denote the lifecycle method invoked just after the CSS close transition ends but before the child has been removed from the DOM.
onClosing: It is used to denote the lifecycle method invoked just before the CSS close transition begins on a child.
onInteraction: It is a callback function that is triggered in controlled mode when the popover open state would change due to user interaction.
onOpened: It is used to denote the lifecycle method invoked just after the CSS open transition ends.
onOpening: It is used to denote the lifecycle method invoked just after mounting the child in the DOM but just before the CSS open transition begins.
openOnTargetFocus: It is used to indicate whether the popover should open when its target is focused or not.
placement: It is used for the placement (relative to the target) at which the popover should appear.
popoverClassName: It is used to denote the space-delimited string of class names applied to the popover element.
portalClassName: It is used to denote the space-delimited string of class names applied to the Portal element if usePortal={true}.
portalContainer: It is used to denote the container element into which the overlay renders its contents, when usePortal is true.
position: It is used to denote the position (relative to the target) at which the popover should appear.
targetClassName: It is used to denote the space-delimited string of class names applied to the target element.
targetProps: It is used to denote the HTML props to spread to the target element.
targetTagName: It is used to denote the HTML tag name for the target element.
transitionDuration: It is used to indicate how long the tooltip appears/disappears transition takes in milliseconds.
usePortal: It is used to indicate whether the popover should be rendered inside a Portal attached to portalContainer prop or not.
wrapperTagName: It is used to denote the HTML tag name for the wrapper element, which also receives the className prop.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:
```
npx create-react-app foldername
```
Step 2: After creating your project folder i.e. folder name, move to it using the following command:
```
cd foldername
```
Step 3: After creating the ReactJS application, Install the required module using the following command:
```
npm install @blueprintjs/core
```

Project Structure: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css'; 
import { Tooltip, Button } from "@blueprintjs/core"; 
  
function App() { 
    return ( 
        <div style={{ 
            display: 'block', width: 400, padding: 30 
        }}> 
            <h4>ReactJS Blueprint Tooltip Component</h4> 
            <Tooltip content="I am sample tooltip info!" position='right'> 
                <Button>Tooltip, Hover me</Button> 
            </Tooltip> 
        </div > 
    ); 
} 
  
export default App;