React Suite Popover Placement

A React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.

In this article, we’ll learn about React suite popover placement. The popover is used to show the popup information that is triggered on any event over the parent window. Now, these popovers can be placed in around 19 different positions and those are top, topStart, topEnd, bottom, bottomStart, bottomEnd, left, leftStart, leftEnd, right, rightStart, rightEnd, auto, autoVertical, autoVerticalStart, autoVerticalEnd, autoHorizontal, autoHorizontalStart, and autoHorizontalEnd.

Syntax:

// Import Statement
import { Popover, Button, Whisper } from "rsuite/";


// App.JS file
const speaker = (
  <Popover>
    ...
  </Popover>
);

const CustomWhisper = ({ placement }) => (
  <Whisper placement={placement}>
    <Button>...</Button>
  </Whisper>
);

Function App () {
return (
     <CustomWhisper placement="left" />
 );
}

Popover props:

• arrow: This is used whether to show an arrow indicator or not.
• children: This is used to denote the content of the component.
• classPrefix: This is used to denote the prefix of the component CSS class.
• title: This is used to denote the title of the component.
• visible: This is used to denote the component is visible by default.

Whisper props:

• container: This is used to set the rendering container.
• delay: This is used to denote the delay Time.
• delayClose: This is used to denote the close delay Time.
• delayOpen: This is used to denote the open delay Time.
• enterable: This is used to check whether the mouse is allowed to enter the floating layer of the popover when the trigger value is set to hover.
• followCursor: This is used to enable the speaker to follow the cursor.
• full: This is used to denote the content full of the container.
• onBlur: This is a callback function that is triggered on losing the focus.
• onClick: This is a callback function that is triggered on a click event.
• onClose: This is a callback function that is triggered on closing the component.
• onEnter: This is a callback function that is triggered before the overlay transitions in.
• onEntered: This is a callback function that is triggered after the overlay finishes transitioning in.
• onEntering: This is a callback function that is triggered as the overlay begins to transition in.
• onExit: This is a callback function that is triggered right before the overlay transitions out.
• onExited: This is a callback function that is triggered after the overlay finishes transitioning out.
• onExiting: This is a callback function that is triggered as the overlay begins to transition out.
• onFocus: This is a callback function to get the focus.
• onOpen: This is a callback function that is triggered when the open component.
• placement: This is used for the placement of the component.
• preventOverflow: This is used to prevent floating element overflow.
• trigger: This is used for the triggering events.

Creating React Application And Installing Module:

Step 1: Create a React application using the given command:

npm create-react-app projectname

Step 2: After creating your project, move to it using the given command:

cd projectname

Step 3: Now Install the rsuite node package using the given command:

npm install rsuite

Project Structure: Now your project structure should look like the following:

Example 1: Below example demonstrates the 12 basic left, right, top, and bottom positioned popovers.

Javascript

import React from "react";
import "rsuite/dist/rsuite.min.css";
import { Popover, Button, Whisper } from "rsuite/";

const speaker = (
  <Popover title="Geeks">
    <p>Hi! Welcome to GeeksforGeeks</p>
  </Popover>
);

const CustomWhisper = ({ placement }) => (
  <Whisper
    placement={placement}
    trigger="click"
    controlId={`control-id-${placement}`}
    speaker={speaker}
  >
    <Button style={{ marginRight: 10 }}>
        {placement}</Button>
  </Whisper>
);

export default function App() {
  return (
    <center>
      <div style={{ padding: 20 }}>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>
            React Suite Popover Placement</h4>

        <div
          style={{
            padding: 30,
            margin: 20,
            backgroundColor: "lightgreen",
            maxWidth: 1030,
          }}
        >
          <CustomWhisper placement="left" />
          <CustomWhisper placement="leftStart" />
          <CustomWhisper placement="leftEnd" />
          <CustomWhisper placement="right" />
          <CustomWhisper placement="rightStart" />
          <CustomWhisper placement="rightEnd" />
          <CustomWhisper placement="top" />
          <CustomWhisper placement="topStart" />
          <CustomWhisper placement="topEnd" />
          <CustomWhisper placement="bottom" />
          <CustomWhisper placement="bottomStart" />
          <CustomWhisper placement="bottomEnd" />
        </div>
      </div>
    </center>
  );
}

Output:

Example 2: Below example demonstrates the 7 auto positioned popovers.

Javascript

import React from "react";
import "rsuite/dist/rsuite.min.css";
import { Popover, Button, Whisper } from "rsuite/";

const speaker = (
  <Popover title="GeeksforGeeks">
    <p>Looking for some courses!</p>
  </Popover>
);

const CustomWhisper = ({ placement }) => (
  <Whisper
    placement={placement}
    trigger="click"
    controlId={`control-id-${placement}`}
    speaker={speaker}
  >
    <Button style={{ marginRight: 10 }}>
        {placement}</Button>
  </Whisper>
);

export default function App() {
  return (
    <center>
      <div style={{ padding: 20 }}>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>
            React Suite Popover Placement</h4>

        <div
          style={{
            padding: 30,
            margin: 20,
            backgroundColor: "orange",
            maxWidth: 1030,
          }}
        >
          <CustomWhisper placement="auto" />
          <CustomWhisper placement="autoVertical" />
          <CustomWhisper placement="autoVerticalStart" />
          <CustomWhisper placement="autoVerticalEnd" />
          <CustomWhisper placement="autoHorizontal" />
          <CustomWhisper placement="autoHorizontalStart" />
          <CustomWhisper placement="autoHorizontalEnd " />
        </div>
      </div>
    </center>
  );
}

Output:

Reference: https://rsuitejs.com/components/popover/#placement