import * as React from 'react';
import { Col, Row, Tooltip, Button } from '@btri-ui/base';

export default () => {
  const placementList = [
    { placement: 'top', label: 'top' },
    { placement: 'left', label: 'left' },
    { placement: 'right', label: 'right' },
    { placement: 'bottom', label: 'bottom' },
    { placement: 'topLeft', label: 'top-left' },
    { placement: 'topRight', label: 'top-right' },
    { placement: 'bottomLeft', label: 'bottom-left' },
    { placement: 'bottomRight', label: 'bottom-right' },
    { placement: 'leftTop', label: 'left-top' },
    { placement: 'leftBottom', label: 'left-bottom' },
    { placement: 'rightTop', label: 'right-top' },
    { placement: 'rightBottom', label: 'right-bottom' },
  ];
  return (
    <>
      <Row autoMode={true}>
        {placementList.map(item => {
          return (
            <Col span={3} key={item.placement}>
              <Tooltip title="这是一条tooltip内容" placement={item.placement}>
                <Button>{item.label}</Button>
              </Tooltip>
            </Col>
          );
        })}
      </Row>
    </>
  );
};