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.
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