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