OverlayTrigger 基础触发弹出

基础弹出触发组件，在组件 <Overlay> 的基础上添加事件和 12 个方向的位置，组件 <Tooltip>，<Popover> 是基于这个组件封装的，弹出框围绕对象指定位置。

import { OverlayTrigger } from 'uiw';
// or
import OverlayTrigger from '@uiw/react-overlay-trigger';

基础用法

最简单的用法。

```jsx mdx:preview&bg=#fff import React from 'react'; import { OverlayTrigger } from 'uiw';

const tooltip = (

export default Demo;

### 配合组件使用

下面配合 [`<Card />`](#/components/card) 组件使用。

```jsx mdx:preview&bg=#fff
import React from 'react';
import { OverlayTrigger, Card } from 'uiw';

const card = (
  <Card active>
    <strong>Hellow uiw!</strong> Check this info.<br />
    展示 12 个方向位置
  </Card>
);
const Demo = () => (
  <OverlayTrigger placement="top" overlay={card}>
    <span>鼠标移动到此处，显示和消失触发事件</span>
  </OverlayTrigger>
)
export default Demo;

位置

位置有 12 个方向，根据 placement 参数来设置。

```jsx mdx:preview&bg=#fff import React from 'react'; import { OverlayTrigger, Card, Button } from 'uiw'; const btnStl = {position: 'relative', width: 70, height: 50 }

const card = ( <Card active> Hellow uiw! Check this info.
展示 12 个方向位置 </Card> ); const Demo = () => (

### 鼠标经过事件

默认离开**触发区域**隐藏弹出目标，设置 `isOutside` 值为 `true`，在**触发区域**或**弹出目标区域**内，不隐藏**弹出目标**。

```jsx mdx:preview&bg=#fff
import React from 'react';
import { OverlayTrigger, Card, Divider } from 'uiw';

const card = (
  <Card active>
    <strong>Hellow uiw!</strong> Check this info.<br />
    展示 12 个方向位置
  </Card>
);

class Demo extends React.Component {
  constructor() {
    super()
    this.state = {
      isVisbale: false,
    }
  }
  onVisibleChange(isVisbale) {
    this.setState({ isVisbale })
  }
  render() {
    return (
      <div>
        <OverlayTrigger
          placement="top"
          isOutside={true}
          onVisibleChange={this.onVisibleChange.bind(this)}
          overlay={card}
        >
          <span>鼠标移动到此处，显示和消失触发事件</span>
        </OverlayTrigger>
        <Divider />
        <div>状态：{this.state.isVisbale ? '' : '不'}可见</div>
      </div>
    )
  }
}
export default Demo;

延迟进入和消失

延迟属性，只针对 trigger=hover 有效。

```jsx mdx:preview&bg=#fff import React from 'react'; import { OverlayTrigger, Card } from 'uiw';

const card = ( <Card active> Hellow uiw! Check this info.
展示 12 个方向位置 </Card> ); const Demo = () => ( <OverlayTrigger delay={{ show: 0, hide: 4000 }} placement="top" overlay={card}> 鼠标移动到此处，显示和消失触发事件，延迟 4s 消失 </OverlayTrigger> ) export default Demo;

### 组件受控

通过设置属性 isOpen 可以文字提示手动控制状态的展示。

```jsx mdx:preview&bg=#fff
import React from 'react';
import { OverlayTrigger, Card, Divider, Switch } from 'uiw';

const card = (
  <Card active>
    <strong>Hellow uiw!</strong> Check this info.<br />
    展示 12 个方向位置
  </Card>
);

class Demo extends React.Component {
  constructor() {
    super()
    this.state = {
      isOpen: false,
    }
  }
  onChange(e) {
    this.clickChecked = false;
    this.setState({ isOpen: e.target.checked });
  }
  onVisibleChange(isOpen) {
    console.log('onVisibleChange: ', isOpen);
    this.setState({ isOpen: isOpen });
  }
  render() {
    return (
      <div>
        <OverlayTrigger
          onVisibleChange={this.onVisibleChange.bind(this)}
          isOpen={this.state.isOpen}
          placement="right"
          onEnter={(node, isAppearing) => {
            console.log('~~', node, isAppearing);
          }}
          overlay={card}
        >
          <span>鼠标移动到此处，显示和消失触发事件</span>
        </OverlayTrigger>
        <Divider />
        <Switch checked={this.state.isOpen} onChange={this.onChange.bind(this)} />
      </div>
    );
  }
}
export default Demo;

usePortal

设置 usePortal={false} 将模态对话框生成到根节点的里面。

```jsx mdx:preview&bg=#fff import React from 'react'; import { OverlayTrigger, Card, Divider } from 'uiw';

const card = ( <Card active> Hellow uiw! Check this info.
展示 12 个方向位置 </Card> );

class Demo extends React.Component { constructor() { super() this.state = { isOpen: false, } } onVisibleChange(isOpen) { this.setState({ isOpen }) } render() { return (

Props

更多属性文档请参考 Overlay。