maycur-business/lib/Tippy/README.md

maycur business react components of web

#### Tippy自动方向调整

## 何时使用
类似antd的popper,当到达边界可以自动调整方向，MkDropdown就是使用这个组件，但那只是其中一种用法,下面给出一些简单会经常使用到的API，具体参数与用法可以参考:https://github.com/tvkhoa/react-tippy，Tippy组件只是对它做了一些修改


## API

按钮的属性说明如下：

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| disabled | 是否禁用 | boolean | - |
| open | 菜单是否显示 | boolean | - |
| position | 指定将工具提示放在元素上的方向。添加后缀-start或-end移动位置。top-end就是一个例子。top bottom left right | string | 'bottom' |
| trigger | 触发下拉的行为 mouseenter focus click manual| string | 'mouseenter focus' |
| delay | 指定触发事件的工具提示显示后需要多长时间。| number | 0 |
| hideDelay | 指定在触发假事件以隐藏工具提示后需要多长时间。单击文档以隐藏工具提示时不适用。| number | 0 |
| duration | 指定显示工具提示时转换动画完成所需的时间。| number | 0 |
| animation | 指定工具提示具有的过渡动画的类型。shift perspective fade scale none| string | 'shift' |
| distance | 指定工具提示与其元素的距离| number | 0 |
| stickyDuration | 当popper的位置随其元素移动而更新时，指定“平滑”过渡。| number | 0 |
| offset | 在相反的轴上偏移工具提示。对于位置顶部和底部，它充当offsetX。对于左右位置，它作为offsetY。| number或者string | 0 |
| followCursor | 指定是否跟随用户的鼠标光标（仅限鼠标设备）| boolean | false |
| inertia | 使用三次贝塞尔曲线修改transition-timing-function以创建“弹弓”的惯性效果| boolean | false |
| boundariesElement | 修饰符使用的边界。可以是scrollParent，window，viewport或者任何DOM元素| string或者HTMLElement | 'window' |
| onUpdate | 更新popper时调用回调。在初始化/创建popper时不会调用此回调，但仅在后续更新时调用。返回一个data参数。用data.instance。访问Popper.js实例。 | fuc | - |
| onCreate | 创建popper时调用回调。返回一个data参数。用data.instance。访问Popper.js实例。 | fuc | - |




```jsx

    <Tooltip
        trigger="click"
        interactive
        position="right"
        animateFill={false}
        transitionFlip={false}
        html={(
        <div style={{ width: 400 }}>
            <p>111</p>
            <input
            type="text"
            value={111}
            onChange={(e) => { console.log(111) }}
            />
        </div>
        )}
    >
        <span className="App-intro" >
        Interactive tooltip
        </span>
    </Tooltip>
```