Popover气泡卡片

点击/鼠标移入元素,弹出气泡式的卡片浮层。

何时使用

当目标元素有进一步的描述和相关操作时,可以收纳到卡片中,根据用户的操作行为进行展现。

Tooltip 的区别是,用户可以对浮层上的元素进行操作,因此它可以承载更复杂的内容,比如链接或按钮等。

代码演示

Popover气泡卡片 - 图1

基本

最简单的用法,浮层的大小由内容区域决定。

  1. import { Popover, Button } from 'antd';
  2. const content = (
  3. <div>
  4. <p>Content</p>
  5. <p>Content</p>
  6. </div>
  7. );
  8. ReactDOM.render(
  9. <Popover content={content} title="Title">
  10. <Button type="primary">Hover me</Button>
  11. </Popover>,
  12. mountNode,
  13. );

Popover气泡卡片 - 图2

位置

位置有十二个方向。

  1. import { Popover, Button } from 'antd';
  2. const text = <span>Title</span>;
  3. const content = (
  4. <div>
  5. <p>Content</p>
  6. <p>Content</p>
  7. </div>
  8. );
  9. const buttonWidth = 70;
  10. ReactDOM.render(
  11. <div className="demo">
  12. <div style={{ marginLeft: buttonWidth, whiteSpace: 'nowrap' }}>
  13. <Popover placement="topLeft" title={text} content={content} trigger="click">
  14. <Button>TL</Button>
  15. </Popover>
  16. <Popover placement="top" title={text} content={content} trigger="click">
  17. <Button>Top</Button>
  18. </Popover>
  19. <Popover placement="topRight" title={text} content={content} trigger="click">
  20. <Button>TR</Button>
  21. </Popover>
  22. </div>
  23. <div style={{ width: buttonWidth, float: 'left' }}>
  24. <Popover placement="leftTop" title={text} content={content} trigger="click">
  25. <Button>LT</Button>
  26. </Popover>
  27. <Popover placement="left" title={text} content={content} trigger="click">
  28. <Button>Left</Button>
  29. </Popover>
  30. <Popover placement="leftBottom" title={text} content={content} trigger="click">
  31. <Button>LB</Button>
  32. </Popover>
  33. </div>
  34. <div style={{ width: buttonWidth, marginLeft: buttonWidth * 4 + 24 }}>
  35. <Popover placement="rightTop" title={text} content={content} trigger="click">
  36. <Button>RT</Button>
  37. </Popover>
  38. <Popover placement="right" title={text} content={content} trigger="click">
  39. <Button>Right</Button>
  40. </Popover>
  41. <Popover placement="rightBottom" title={text} content={content} trigger="click">
  42. <Button>RB</Button>
  43. </Popover>
  44. </div>
  45. <div style={{ marginLeft: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
  46. <Popover placement="bottomLeft" title={text} content={content} trigger="click">
  47. <Button>BL</Button>
  48. </Popover>
  49. <Popover placement="bottom" title={text} content={content} trigger="click">
  50. <Button>Bottom</Button>
  51. </Popover>
  52. <Popover placement="bottomRight" title={text} content={content} trigger="click">
  53. <Button>BR</Button>
  54. </Popover>
  55. </div>
  56. </div>,
  57. mountNode,
  58. );

Popover气泡卡片 - 图3

箭头指向

设置了 arrowPointAtCenter 后,箭头将指向目标元素的中心。

  1. import { Popover, Button } from 'antd';
  2. const text = <span>Title</span>;
  3. const content = (
  4. <div>
  5. <p>Content</p>
  6. <p>Content</p>
  7. </div>
  8. );
  9. ReactDOM.render(
  10. <div>
  11. <Popover placement="topLeft" title={text} content={content}>
  12. <Button>Align edge / 边缘对齐</Button>
  13. </Popover>
  14. <Popover placement="topLeft" title={text} content={content} arrowPointAtCenter>
  15. <Button>Arrow points to center / 箭头指向中心</Button>
  16. </Popover>
  17. </div>,
  18. mountNode,
  19. );

Popover气泡卡片 - 图4

三种触发方式

鼠标移入、聚集、点击。

  1. import { Popover, Button } from 'antd';
  2. const content = (
  3. <div>
  4. <p>Content</p>
  5. <p>Content</p>
  6. </div>
  7. );
  8. ReactDOM.render(
  9. <div>
  10. <Popover content={content} title="Title" trigger="hover">
  11. <Button>Hover me</Button>
  12. </Popover>
  13. <Popover content={content} title="Title" trigger="focus">
  14. <Button>Focus me</Button>
  15. </Popover>
  16. <Popover content={content} title="Title" trigger="click">
  17. <Button>Click me</Button>
  18. </Popover>
  19. </div>,
  20. mountNode,
  21. );

Popover气泡卡片 - 图5

从浮层内关闭

使用 visible 属性控制浮层显示。

  1. import { Popover, Button } from 'antd';
  2. class App extends React.Component {
  3. state = {
  4. visible: false,
  5. };
  6. hide = () => {
  7. this.setState({
  8. visible: false,
  9. });
  10. };
  11. handleVisibleChange = visible => {
  12. this.setState({ visible });
  13. };
  14. render() {
  15. return (
  16. <Popover
  17. content={<a onClick={this.hide}>Close</a>}
  18. title="Title"
  19. trigger="click"
  20. visible={this.state.visible}
  21. onVisibleChange={this.handleVisibleChange}
  22. >
  23. <Button type="primary">Click me</Button>
  24. </Popover>
  25. );
  26. }
  27. }
  28. ReactDOM.render(<App />, mountNode);

Popover气泡卡片 - 图6

悬停点击弹出窗口

以下示例显示如何创建可悬停和单击的弹出窗口。

  1. import { Popover, Button } from 'antd';
  2. class App extends React.Component {
  3. state = {
  4. clicked: false,
  5. hovered: false,
  6. };
  7. hide = () => {
  8. this.setState({
  9. clicked: false,
  10. hovered: false,
  11. });
  12. };
  13. handleHoverChange = visible => {
  14. this.setState({
  15. hovered: visible,
  16. clicked: false,
  17. });
  18. };
  19. handleClickChange = visible => {
  20. this.setState({
  21. clicked: visible,
  22. hovered: false,
  23. });
  24. };
  25. render() {
  26. const hoverContent = <div>This is hover content.</div>;
  27. const clickContent = <div>This is click content.</div>;
  28. return (
  29. <Popover
  30. style={{ width: 500 }}
  31. content={hoverContent}
  32. title="Hover title"
  33. trigger="hover"
  34. visible={this.state.hovered}
  35. onVisibleChange={this.handleHoverChange}
  36. >
  37. <Popover
  38. content={
  39. <div>
  40. {clickContent}
  41. <a onClick={this.hide}>Close</a>
  42. </div>
  43. }
  44. title="Click title"
  45. trigger="click"
  46. visible={this.state.clicked}
  47. onVisibleChange={this.handleClickChange}
  48. >
  49. <Button>Hover and click / 悬停并单击</Button>
  50. </Popover>
  51. </Popover>
  52. );
  53. }
  54. }
  55. ReactDOM.render(<App />, mountNode);

API

参数说明类型默认值版本
content卡片内容string|ReactNode
title卡片标题string|ReactNode

更多属性请参考 Tooltip

注意

请确保 Popover 的子元素能接受 onMouseEnteronMouseLeaveonFocusonClick 事件。