React.js Blueprint Popover2 Placement

React.js Blueprint is a front-end UI toolkit. It is very optimized and popular for building interfaces that are complex data-dense for desktop applications. React.js Blueprint Popover2 component makes the content associated with a target element appear floating on the screen.

The placement concept of the Popover2 component defines the position of the  Popover2. It takes these values – ‘bottom-start’, ‘bottom-end’, ‘bottom’, ‘top-start’, ‘top-end’, ‘top’, ‘left-start’, ‘left-end’, ‘left’, ‘right-start’, ‘right-end’, ‘right’, ‘auto’, ‘auto-start’ and ‘auto-end’.

Syntax:

<Popover2 placement=""/>

Prerequisite:

• Introduction and Installation ReactJS
• ReactJS Blueprint Popover2 Component

Creating React Application and Module installation:

Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.

npm create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command.

cd project

Step 3:  now install the dependency by using the following command:

npm install @blueprintjs/core
npm install @blueprintjs/popover2

Project Structure: It will look like this:

Example 1: We are importing the Popover2  Component from “@blueprintjs/popover2” and the Button Component from “@blueprintjs/core”. To apply the default styles of the components we are importing “@blueprintjs/core/lib/css/blueprint.css”.

To the Popover2 Component in the content, we have created a div with some inline styling and the text “Welcome to Geeksforgeeks !”. Now to the Popover2 component, we are passing different values to the placement prop.

App.js

Javascript

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;

Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

Example 2: We are passing values like ‘auto-start’, ‘auto’ and ‘auto-end’ to the placement prop.

App.js

Javascript

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="auto-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="auto-end" />
                    )}
                />
                <Popover2
                    placement="auto"
                    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="auto" />
                    )}
                />
                <Popover2
                    placement="auto-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="auto-start" />
                    )}
                />
            </div>
        </div>
    );
}

export default App;

Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

Reference: https://blueprintjs.com/docs/#popover2-package/popover2.placement