import { Layout, Playground, Attributes } from 'lib/components'
import { Tooltip, Spacer, Row, Col, Button, Link, Badge, Code, Text } from 'components'

export const meta = {
  title: '文字提示 Tooltip',
  group: '数据展示',
}

## Tooltip / 文字提示

在悬停时显示额外的提示信息。

<Playground
  desc="基础示例。"
  scope={{ Tooltip }}
  code={`
<Tooltip text={'缓存是达到高性能的重要组成部分'}>文字提示</Tooltip>
`} />

<Playground
  title="触发方式"
  desc="使用点击触发提示框。"
  scope={{ Tooltip }}
  code={`
<Tooltip text={'缓存是达到高性能的重要组成部分'} trigger="click" type="dark">
  <span>点击我</span>
</Tooltip>
`} />

<Playground
  title="组件组合"
  desc="与不同的组件组合使用。"
  scope={{ Tooltip, Button, Link, Spacer, Row, Badge }}
  code={`
<Row align="middle">
  <Tooltip text={'缓存是达到高性能的重要组成部分'} type="dark">
    <Button auto size="small">按钮</Button>
  </Tooltip>
  <Spacer inline x={1} />
  <Tooltip text={'缓存是达到高性能的重要组成部分'} type="dark">
    <Badge>1000+</Badge>
  </Tooltip>
  <Spacer inline x={1} />
  <Tooltip text={'缓存是达到高性能的重要组成部分'} type="dark">
    <Link href="#" color>超链接</Link>
  </Tooltip>
</Row>
`} />

<Playground
  title="定制内容"
  desc="你可以自定义弹出框的内容。"
  scope={{ Tooltip, Spacer, Row, Code, Text }}
  code={`
<Row align="middle">
  <Tooltip text={<>请求中带上 <Code>If-Modified-Since</Code> 来验证缓存。</>}>
    <span>上方</span>
  </Tooltip>
  <Spacer inline x={2.5} />
  <Tooltip text={<>请求中带上 If-Modified-Since 来<Text b>验证缓存</Text>。</>} placement="bottom">
    <span>下方</span>
  </Tooltip>
</Row>
`} />

<Playground
  title="类型"
  desc="我们为不同的类型预置了样式。"
  scope={{ Tooltip, Spacer, Row, Code, Text }}
  code={`
<Row align="middle">
  <Tooltip text="缓存是达到高性能的重要组成部分" type="dark">
    <span>黑暗的</span>
  </Tooltip>
  <Spacer inline x={1.5} />
  <Tooltip text="缓存是达到高性能的重要组成部分" type="success">
    <span>成功</span>
  </Tooltip>
  <Spacer inline x={1.5} />
  <Tooltip text="缓存是达到高性能的重要组成部分" type="warning">
    <span>警告</span>
  </Tooltip>
  <Spacer inline x={1.5} />
  <Tooltip text="缓存是达到高性能的重要组成部分" type="error">
    <span>错误</span>
  </Tooltip>
  <Spacer inline x={1.5} />
  <Tooltip text="缓存是达到高性能的重要组成部分" type="secondary">
    <span>次要的</span>
  </Tooltip>
</Row>
`} />

<Playground
  title="变体"
  desc="特殊样式。"
  scope={{ Tooltip, Spacer, Row, Code, Text }}
  code={`
<Row align="middle">
  <Tooltip text="缓存是达到高性能的重要组成部分" type="lite">
    <span>精简的</span>
  </Tooltip>
  <Spacer inline x={2.5} />
  <Tooltip text="缓存是达到高性能的重要组成部分" hideArrow>
    <span>无箭头</span>
  </Tooltip>
</Row>
`} />

<Playground
  title="对齐方式"
  desc="有 12 种对齐方式可用。"
  scope={{ Tooltip, Spacer, Row, Col }}
  code={`
() => {
  const text = 'The Evil Rabbit Jumped over the Fence'
  const Center = ({ children, ...props }) => (
    <Col style={{ display: 'flex', justifyContent: 'center' }} {...props}>{children}</Col>
  )
  return (
    <div style={{ width: '80%', margin: '0 auto' }}>
      <Row justify="center">
        <Center span={5}>
          <Tooltip text={text} placement="topStart" type="dark">topStart</Tooltip>
        </Center>
        <Center span={5}>
          <Tooltip text={text} placement="top" type="dark">top</Tooltip>
        </Center>
        <Center span={5}>
          <Tooltip text={text} placement="topEnd" type="dark">topEnd</Tooltip>
        </Center>
      </Row>
      <Row justify="space-between">
        <Center span={5}>
          <Tooltip text={text} placement="leftStart" type="dark">leftStart</Tooltip>
        </Center>
        <Center span={5}>
          <Tooltip text={text} placement="rightStart" type="dark">rightStart</Tooltip>
        </Center>
      </Row>
      <Spacer y={.5} />
      <Row justify="space-between">
        <Center span={5}>
          <Tooltip text={text} placement="left" type="dark">left</Tooltip>
        </Center>
        <Center span={5}>
          <Tooltip text={text} placement="right" type="dark">right</Tooltip>
        </Center>
      </Row>
      <Spacer y={.5} />
      <Row justify="space-between">
        <Center span={5}>
          <Tooltip text={text} placement="leftEnd" type="dark">leftEnd</Tooltip>
        </Center>
        <Center span={5}>
          <Tooltip text={text} placement="rightEnd" type="dark">rightEnd</Tooltip>
        </Center>
      </Row>
      <Row justify="center">
        <Center span={5}>
          <Tooltip text={text} placement="bottomStart" type="dark">bottomStart</Tooltip>
        </Center>
        <Center span={5}>
          <Tooltip text={text} placement="bottom" type="dark">bottom</Tooltip>
        </Center>
        <Center span={5}>
          <Tooltip text={text} placement="bottomEnd" type="dark">bottomEnd</Tooltip>
        </Center>
      </Row>
    </div>
  )
}
`} />

<Attributes edit="/pages/zh-cn/components/tooltip.mdx">
<Attributes.Title>Tooltip.Props</Attributes.Title>

| 属性 | 描述 | 类型 | 推荐值 | 默认
| ---------- | ---------- | ---- |  -------------- | ------ |
| **text** | 弹出框文字 | `string` `React.ReactNode` | - | - |
| **visible** | 手动控制提示框的显示与隐藏 | `boolean` | - | `false` |
| **initialVisible** | 初始是否可见 | `boolean` | - | `false` |
| **hideArrow** | 隐藏箭头 | `boolean` | - | `false` |
| **type** | 不同的文字提示类型 | [TooltipTypes](#tooltiptypes) | - | `default` |
| **placement** | 提示框与目标的对齐方式 | [Placement](#placement) | - | `top` |
| **trigger** | 触发提示框的方式 | `'click' / 'hover'` | - | `hover` |
| **enterDelay**(ms) | 在提示显示前的延迟 | `number` | - | `100` |
| **leaveDelay**(ms) | 关闭提示前的延迟 | `number` | - | `0` |
| **offset**(px) | 提示框与目标之间的偏移 | `number` | - | `12` |
| **portalClassName** | 弹出框的类名 | `string` | - | - |
| **onVisibleChange** | 当提示框状态改变时触发 | `(visible: boolean) => void` | - | - |
| ... | 原生属性 | `HTMLAttributes` | `'id', 'name', 'className', ...` | - |

<Attributes.Title>TooltipTypes</Attributes.Title>

```ts
type TooltipTypes = 'default'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'dark'
  | 'lite'
```

<Attributes.Title>Placement</Attributes.Title>

```ts
type Placement = 'top'
  | 'topStart',
  | 'topEnd',
  | 'left',
  | 'leftStart',
  | 'leftEnd',
  | 'bottom',
  | 'bottomStart',
  | 'bottomEnd',
  | 'right',
  | 'rightStart',
  | 'rightEnd',
```

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
