Skip to content
Related Articles

Related Articles

ReactJS Blueprint Tooltip Component

Improve Article
Save Article
  • Last Updated : 08 Apr, 2022
Improve Article
Save Article

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;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Reference: https://blueprintjs.com/docs/#core/components/tooltip


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!