import { Button } from
"@blueprintjs/core"
;
import { Popover2 } from
"@blueprintjs/popover2"
;
import
"@blueprintjs/core/lib/css/blueprint.css"
;
function
App() {
return
(
<div className=
"App"
>
<h3> React Blueprint Popover2 Placement</h3>
<div style={{ textAlign:
"center"
}}>
<Popover2
placement=
"top-start"
content={
<div style={{
backgroundColor:
"white"
,
padding:
"30px"
}}>
<h4>
Welcome to{
" "
}
<span style={{ color:
"green"
}}>
Geeksforgeeks
</span>!
</h4>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button {...targetProps}
elementRef={ref} text=
"top-start"
/>
)}
/>
<Popover2
placement=
"top"
content={
<div style={{
backgroundColor:
"white"
,
padding:
"30px"
}}>
<h4>
Welcome to{
" "
}
<span style={{ color:
"green"
}}>
Geeksforgeeks
</span>!
</h4>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button {...targetProps}
elementRef={ref} text=
"top"
/>
)}
/>
<Popover2
placement=
"top-end"
content={
<div style={{
backgroundColor:
"white"
,
padding:
"30px"
}}>
<h4>
Welcome to{
" "
}
<span style={{ color:
"green"
}}>
Geeksforgeeks
</span>!
</h4>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button {...targetProps}
elementRef={ref} text=
"top-end"
/>
)}
/>
<br />
<Popover2
placement=
"right-start"
content={
<div style={{
backgroundColor:
"white"
,
padding:
"30px"
}}>
<h4>
Welcome to{
" "
}
<span style={{ color:
"green"
}}>
Geeksforgeeks
</span>!
</h4>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button {...targetProps}
elementRef={ref} text=
"right-start"
/>
)}
/>
<Popover2
placement=
"right"
content={
<div style={{
backgroundColor:
"white"
,
padding:
"30px"
}}>
<h4>
Welcome to{
" "
}
<span style={{ color:
"green"
}}>
Geeksforgeeks
</span>!
</h4>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button {...targetProps}
elementRef={ref} text=
"right"
/>
)}
/>
<Popover2
placement=
"right-end"
content={
<div style={{
backgroundColor:
"white"
,
padding:
"30px"
}}>
<h4>
Welcome to{
" "
}
<span style={{ color:
"green"
}}>
Geeksforgeeks
</span>!
</h4>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button {...targetProps}
elementRef={ref} text=
"right-end"
/>
)}
/>
<br />
<Popover2
placement=
"left-start"
content={
<div style={{
backgroundColor:
"white"
,
padding:
"30px"
}}>
<h4>
Welcome to{
" "
}
<span style={{ color:
"green"
}}>
Geeksforgeeks
</span>!
</h4>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button {...targetProps}
elementRef={ref} text=
"left-start"
/>
)}
/>
<Popover2
placement=
"left"
content={
<div style={{
backgroundColor:
"white"
,
padding:
"30px"
}}>
<h4>
Welcome to{
" "
}
<span style={{ color:
"green"
}}>
Geeksforgeeks
</span>!
</h4>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button {...targetProps}
elementRef={ref} text=
"left"
/>
)}
/>
<Popover2
placement=
"left-end"
content={
<div style={{
backgroundColor:
"white"
,
padding:
"30px"
}}>
<h4>
Welcome to{
" "
}
<span style={{ color:
"green"
}}>
Geeksforgeeks
</span>!
</h4>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button {...targetProps}
elementRef={ref} text=
"left-end"
/>
)}
/>
<br />
<Popover2
placement=
"bottom-start"
content={
<div style={{
backgroundColor:
"white"
,
padding:
"30px"
}}>
<h4>
Welcome to{
" "
}
<span style={{ color:
"green"
}}>
Geeksforgeeks
</span>!
</h4>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button {...targetProps}
elementRef={ref} text=
"bottom-start"
/>
)}
/>
<Popover2
placement=
"bottom"
content={
<div style={{
backgroundColor:
"white"
,
padding:
"30px"
}}>
<h4>
Welcome to{
" "
}
<span style={{ color:
"green"
}}>
Geeksforgeeks
</span>!
</h4>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button {...targetProps}
elementRef={ref} text=
"bottom"
/>
)}
/>
<Popover2
placement=
"bottom-end"
content={
<div style={{
backgroundColor:
"white"
,
padding:
"30px"
}}>
<h4>
Welcome to{
" "
}
<span style={{ color:
"green"
}}>
Geeksforgeeks
</span>!
</h4>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button {...targetProps} elementRef={ref}
text=
"bottom-end"
/>
)}
/>
</div>
</div>
);
}
export
default
App;