Basic
Three ways to trigger
Placement
Controlling the close of the dialog
Arrow pointing
Hover with click popover
have link
have picture
API

Popover

The floating card popped by clicking or hovering.

When To Use#

A simple popup menu to provide extra information or operations.

Comparing with Tooltip, besides information Popover card can also provide action elements like links and buttons.

Examples

Basic

The most basic example. The size of the floating layer depends on the contents region.

TypeScript
JavaScript
import { Button, Popover } from 'infrad';
import React from 'react';

const content = (
  <div>
    <p>Content</p>
    <p>Content</p>
  </div>
);

const App: React.FC = () => (
  <Popover content={content} title="Title">
    <Button type="primary">Hover me</Button>
  </Popover>
);

export default App;

Placement

There are 12 placement options available.

TypeScript
JavaScript
import { Button, Popover } from 'infrad';
import React from 'react';

const text = <span>Title</span>;
const content = (
  <div>
    <p>Content</p>
    <p>Content</p>
  </div>
);

const buttonWidth = 70;

const App: React.FC = () => (
  <div className="demo">
    <div style={{ marginLeft: buttonWidth, whiteSpace: 'nowrap' }}>
      <Popover placement="topLeft" title={text} content={content} trigger="click">
        <Button>TL</Button>
      </Popover>
      <Popover placement="top" title={text} content={content} trigger="click">
        <Button>Top</Button>
      </Popover>
      <Popover placement="topRight" title={text} content={content} trigger="click">
        <Button>TR</Button>
      </Popover>
    </div>
    <div style={{ width: buttonWidth, float: 'left' }}>
      <Popover placement="leftTop" title={text} content={content} trigger="click">
        <Button>LT</Button>
      </Popover>
      <Popover placement="left" title={text} content={content} trigger="click">
        <Button>Left</Button>
      </Popover>
      <Popover placement="leftBottom" title={text} content={content} trigger="click">
        <Button>LB</Button>
      </Popover>
    </div>
    <div style={{ width: buttonWidth, marginLeft: buttonWidth * 4 + 24 }}>
      <Popover placement="rightTop" title={text} content={content} trigger="click">
        <Button>RT</Button>
      </Popover>
      <Popover placement="right" title={text} content={content} trigger="click">
        <Button>Right</Button>
      </Popover>
      <Popover placement="rightBottom" title={text} content={content} trigger="click">
        <Button>RB</Button>
      </Popover>
    </div>
    <div style={{ marginLeft: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
      <Popover placement="bottomLeft" title={text} content={content} trigger="click">
        <Button>BL</Button>
      </Popover>
      <Popover placement="bottom" title={text} content={content} trigger="click">
        <Button>Bottom</Button>
      </Popover>
      <Popover placement="bottomRight" title={text} content={content} trigger="click">
        <Button>BR</Button>
      </Popover>
    </div>
  </div>
);

export default App;

Arrow pointing

The arrow points to the center of the target element, which set arrowPointAtCenter.

TypeScript
JavaScript
import { Button, Popover } from 'infrad';
import React from 'react';

const content = (
  <>
    <p>Content</p>
    <p>Content</p>
  </>
);

const App: React.FC = () => (
  <>
    <Popover placement="topLeft" title="Title" content={content}>
      <Button>Align edge / 边缘对齐</Button>
    </Popover>
    <Popover placement="topLeft" title="Title" content={content} arrowPointAtCenter>
      <Button>Arrow points to center / 箭头指向中心</Button>
    </Popover>
  </>
);

export default App;

have link

You can customize the content to make it jump with frequently used links

import { Popover, Button } from 'infrad';

const Content = (
  <div>
    <span>popover</span>
    <a style={{ marginLeft: '10px' }}>Link</a>
  </div>
);

ReactDOM.render(
  <Popover content={Content} trigger="click">
    <Button type="primary">click me</Button>
  </Popover>,
  mountNode,
);

Three ways to trigger

Mouse to click, focus and move in.

TypeScript
JavaScript
import { Button, Popover } from 'infrad';
import React from 'react';

const content = (
  <div>
    <p>Content</p>
    <p>Content</p>
  </div>
);

const App: React.FC = () => (
  <div>
    <Popover content={content} title="Title" trigger="hover">
      <Button>Hover me</Button>
    </Popover>
    <Popover content={content} title="Title" trigger="focus">
      <Button>Focus me</Button>
    </Popover>
    <Popover content={content} title="Title" trigger="click">
      <Button>Click me</Button>
    </Popover>
  </div>
);

export default App;

Controlling the close of the dialog

Use visible prop to control the display of the card.

TypeScript
JavaScript
import { Button, Popover } from 'infrad';
import React, { useState } from 'react';

const App: React.FC = () => {
  const [visible, setVisible] = useState(false);

  const hide = () => {
    setVisible(false);
  };

  const handleVisibleChange = (newVisible: boolean) => {
    setVisible(newVisible);
  };

  return (
    <Popover
      content={<a onClick={hide}>Close</a>}
      title="Title"
      trigger="click"
      visible={visible}
      onVisibleChange={handleVisibleChange}
    >
      <Button type="primary">Click me</Button>
    </Popover>
  );
};

export default App;

Hover with click popover

The following example shows how to create a popover which can be hovered and clicked.

TypeScript
JavaScript
import { Button, Popover } from 'infrad';
import React, { useState } from 'react';

const App: React.FC = () => {
  const [clicked, setClicked] = useState(false);
  const [hovered, setHovered] = useState(false);

  const hide = () => {
    setClicked(false);
    setHovered(false);
  };

  const handleHoverChange = (visible: boolean) => {
    setHovered(visible);
    setClicked(false);
  };

  const handleClickChange = (visible: boolean) => {
    setHovered(false);
    setClicked(visible);
  };

  const hoverContent = <div>This is hover content.</div>;
  const clickContent = <div>This is click content.</div>;
  return (
    <Popover
      style={{ width: 500 }}
      content={hoverContent}
      title="Hover title"
      trigger="hover"
      visible={hovered}
      onVisibleChange={handleHoverChange}
    >
      <Popover
        content={
          <div>
            {clickContent}
            <a onClick={hide}>Close</a>
          </div>
        }
        title="Click title"
        trigger="click"
        visible={clicked}
        onVisibleChange={handleClickChange}
      >
        <Button>Hover and click / 悬停并单击</Button>
      </Popover>
    </Popover>
  );
};

export default App;

have picture

You can customize the content to display the commonly used picture

import { Popover, Button, Image } from 'infrad';

const flexStyle = {
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  width: '400px',
};

const Content = (
  <div style={flexStyle}>
    <Image
      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
      width={400}
    />
    <span>Popover Title</span>
    <span>
      This is popoveer.When the text is too long.This is popover. When the text is too long.
    </span>
  </div>
);

ReactDOM.render(
  <Popover content={Content} trigger="click">
    <Button type="primary">click me</Button>
  </Popover>,
  mountNode,
);

API#

Param	Description	Type	Default value	Version
content	Content of the card	ReactNode \| () => ReactNode	-
title	Title of the card	ReactNode \| () => ReactNode	-

Consult Tooltip's documentation to find more APIs.

Note#

Please ensure that the child node of Popover accepts onMouseEnter, onMouseLeave, onFocus, onClick events.