---
name: Popover 弹窗
route: /popover
parent: 组件
menu: 反馈
---
import { Playground, Props } from 'docz'
import  Popover  from '../components/popover'
import  Button  from '../components/button'
import  Input  from '../components/input'
import  Radio  from '../components/radio'
import  Checkbox  from '../components/checkbox'
import Demo from './components/pop'

# Popover 弹窗
>提示: 展开代码编辑器可以在线编辑，实时生效

## 基础用法

<Playground>
    <Popover content='我是说明'>
     <Button>hover me</Button>
    </Popover>
    <Popover content={
    <div>
    <Input placeholder='请输入姓名'/>
    <br/>
     <Button style={{marginTop:5}}>确定</Button>
     <Checkbox>点我</Checkbox>
     </div>
     }>
         <Button>自定义content</Button>
        </Popover>
    <Popover content='我是说明' themeColor='black'>
         <Button color="warning">black theme</Button>
        </Popover> 
</Playground>


## trigger='click'

<Playground>
<Popover content='我是说明' trigger='click'>
     <Input placeholder='请输入'/>
    </Popover>
    
</Playground>


## placement 

<Playground>
<Popover content='我是说明' placement='topLeft'>
<Button>topLeft</Button>
</Popover>
<Popover content='我是说明' placement='top'>
<Button>top</Button>
</Popover>
<Popover content='我是说明' placement='topRight'>
<Button>topRight</Button>
</Popover>
<br/>
<Popover content='我是说明' placement='leftTop'>
<Button>leftTop</Button>
</Popover>
<Popover content='我是说明' placement='rightTop'>
<Button>topRight</Button>
</Popover>
<br/>

<Popover content='我是说明' placement='left'>
<Button>left</Button>
</Popover>
<Popover content='我是说明' placement='right'>
<Button>right</Button>
</Popover>  
<br/>
<Popover content='我是说明' placement='leftBottom'>
<Button>leftBottom</Button>
</Popover>
<Popover content='我是说明' placement='rightBottom'>
<Button>rightBottom</Button>
</Popover>            

<br/>                      
<Popover content='我是说明' placement='bottomLeft'>
<Button>bottomLeft</Button>
</Popover>
<Popover content='我是说明' placement='bottom'>
<Button>bottom</Button>
</Popover>
<Popover content='我是说明' placement='bottomRight'>
<Button>bottomRight</Button>
</Popover>
<br/>

  
</Playground>




## control visible


<Demo/>


```typescript jsx
import React, { useState } from 'react';
import Popover from 'components/popover';
import Input from 'components/input';
type IProps = {};
const Component = function(props: IProps) {
    const [tip, setTip] = useState('');
    const [visible, setVisible] = useState(true);
    return (
        <div>
            <Popover
                content={tip}
                trigger="click"
                visible={visible}
                onVisibleChange={e => {
                    console.log(e);
                    setVisible(e);
                }}
            >
                <Input placeholder="tips based on input" value={tip} onChange={(e: any) => setTip(e.target.value)} />
            </Popover>
        </div>
    );
};
Component.defaultProps = {};
export default Component;

```

## API


<Props of={Popover} />