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
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
