---
title: Popover 气泡卡片 (done)
order: 16
group:
  path: /components
nav: 
  title: 组件
  path: /components
---

## 使用

### 使用原则


### 基本使用
```jsx
import React from 'react';
import { Popover, Button } from 'baas-ui';

const content = <span>这是一段很长的文字解释这是一段很长的文字</span>;

const buttonWidth = 88;

const buttonStyle = { width: 88, marginRight: 8, marginBottom: 8 };

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

### 带标题
带标题时，默认最小宽度为 `320px`
```jsx
import React from 'react';
import { Popover, Button } from 'baas-ui';

const title = "标题文字";

const content = (
  <div>
    <div>1、这是一段很长的描述文字</div>
    <div>2、这是一段很长的描述文字</div>
    <div>3、这是一段很长的描述文字</div>
    <div>4、这是一段很长的描述文字</div>
  </div>
);

export default () => (
  <div>
    <Popover placement="rightTop" title={title} content={content}>
      <Button>带标题</Button>
    </Popover>
  </div>
);

```