import { Layout, Playground, Attributes } from 'lib/components'
import { Tooltip, Spacer, Grid, 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, Badge }}
  code={`
<div>
  <Tooltip text={'缓存是达到高性能的重要组成部分'} type="dark">
    <Button auto scale={1/2}>按钮</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>
</div>
`}
/>

<Playground
  title="定制内容"
  desc="你可以自定义弹出框的内容。"
  scope={{ Tooltip, Spacer, Code, Text }}
  code={`
<div>
  <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>
</div>
`}
/>

<Playground
  title="类型"
  desc="我们为不同的类型预置了样式。"
  scope={{ Tooltip, Spacer, Code, Text }}
  code={`
<div>
  <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>
</div>
`}
/>

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

<Playground
  title="对齐方式"
  desc="有 12 种对齐方式可用。"
  scope={{ Tooltip, Spacer, Grid }}
  code={`
() => {
  const text = 'HTTP is stateless, but not sessionless'
  return (
    <Grid.Container gap={1.5} justify="center" alignItems="center">
      <Grid xs={8} justify="flex-end">
        <Tooltip text={text} placement="topStart" type="dark">topStart</Tooltip>
      </Grid>
      <Grid xs={8} justify="center">
        <Tooltip text={text} placement="top" type="dark">top</Tooltip>
      </Grid>
      <Grid xs={8}>
        <Tooltip text={text} placement="topEnd" type="dark">topEnd</Tooltip>
      </Grid>
      <Grid xs={6} justify="flex-end">
        <Tooltip text={text} placement="leftStart" type="dark">leftStart</Tooltip>
      </Grid>
      <Grid xs={12} />
      <Grid xs={6}>
        <Tooltip text={text} placement="rightStart" type="dark">rightStart</Tooltip>
      </Grid>
      <Grid xs={6} justify="flex-end">
        <Tooltip text={text} placement="left" type="dark">left</Tooltip>
      </Grid>
      <Grid xs={12} />
      <Grid xs={6}>
        <Tooltip text={text} placement="right" type="dark">right</Tooltip>
      </Grid>
      <Grid xs={6} justify="flex-end">
        <Tooltip text={text} placement="leftEnd" type="dark">leftEnd</Tooltip>
      </Grid>
      <Grid xs={12} />
      <Grid xs={6}>
        <Tooltip text={text} placement="rightEnd" type="dark">rightEnd</Tooltip>
      </Grid>
      <Grid xs={8} justify="flex-end">
        <Tooltip text={text} placement="bottomStart" type="dark">bottomStart</Tooltip>
      </Grid>
      <Grid xs={8} justify="center">
        <Tooltip text={text} placement="bottom" type="dark">bottom</Tooltip>
      </Grid>
      <Grid xs={8}>
        <Tooltip text={text} placement="bottomEnd" type="dark">bottomEnd</Tooltip>
      </Grid>
    </Grid.Container>
  )
}
`}
/>

<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)  | 关闭提示前的延迟 (仅 'hover' 模式) | `number`                      | -          | `150`     |
| **offset**(px)      | 提示框与目标之间的偏移             | `number`                      | -          | `12`      |
| **portalClassName** | 弹出框的类名                       | `string`                      | -          | -         |
| **onVisibleChange** | 当提示框状态改变时触发             | `(visible: boolean) => void`  | -          | -         |
| ...                 | 原生属性                           | `HTMLAttributes`              | `'id' ...` | -         |

<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>
