React.js Blueprint Tooltip2 Combining with popover
Last Updated :
27 Sep, 2022
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>GeeksforGeeks</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>GeeksforGeeks</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
Share your thoughts in the comments
Please Login to comment...