WithTooltip

@aligov/components-with-tooltip

简单包裹 tooltip，可用于按钮附带 tooltip 的场景。

API

import WithTooltip from '@aligov/components-with-tooltip';

const btn = <WithTooltip tooltip="something"><Button>Click</Button></WithTooltip>;
参数 说明 类型 默认值
tooltip tooltip 内容，是有效内容时鼠标 hover 展示，否则仅展示 children 的内容 React Element
tooltipProps Balloon.Tooltip 组件的 props object {}

DEMO 列表

简单使用

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@alifd/next';
import WithTooltip from '@aligov/components-with-tooltip';

const customTooltipProps = {
    align: 'r'
};

class App extends Component {
  render() {
    return (
      <div className="demo-app">
        <WithTooltip>
            <Button>OK</Button>
        </WithTooltip>

        <WithTooltip tooltip="No Permission">
            <Button disabled>Delete</Button>
        </WithTooltip>

        <WithTooltip tooltip="No Permission" tooltipProps={customTooltipProps}>
            <Button disabled>Right Tooltip</Button>
        </WithTooltip>
      </div>
    );
  }
}

ReactDOM.render((
  <App/>
), mountNode);
.demo-app .next-btn {
    margin-right: 20px;
}