add tooltip demo
wangxueliang
parent
eddff353fc
commit
75356da275
|
|
@ -15,7 +15,7 @@ const md = {
|
|||
|
||||
目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。
|
||||
|
||||
和 'confirm' 弹出的全屏居中模态对话框相比，交互形式更轻量。。
|
||||
和 'confirm' 弹出的全屏居中模态对话框相比，交互形式更轻量。
|
||||
## 代码演示`,
|
||||
us: `# Popconfirm
|
||||
|
||||
|
|
|
|||
|
|
@ -147,7 +147,7 @@ export default {
|
|||
|
||||
render (h) {
|
||||
const { $props, $data, $slots } = this
|
||||
const { prefixCls, openClassName, getPopupContainer, getTooltipContainer } = $props
|
||||
const { prefixCls, openClassName, getPopupContainer } = $props
|
||||
const children = ($slots.default || []).filter(c => c.tag || c.text.trim() !== '')[0]
|
||||
let sVisible = $data.sVisible
|
||||
// Hide tooltip when there is no title
|
||||
|
|
@ -164,7 +164,7 @@ export default {
|
|||
const tooltipProps = {
|
||||
props: {
|
||||
...$props,
|
||||
getTooltipContainer: getPopupContainer || getTooltipContainer,
|
||||
getTooltipContainer: getPopupContainer,
|
||||
builtinPlacements: this.getPlacements(),
|
||||
visible: sVisible,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
<cn>
|
||||
#### 箭头指向
|
||||
设置了 `arrowPointAtCenter` 后，箭头将指向目标元素的中心。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Arrow pointing at the center
|
||||
By specifying `arrowPointAtCenter` prop, the arrow will point to the center of the target element.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-tooltip placement="topLeft" title="Prompt Text">
|
||||
<a-button>Align edge / 边缘对齐</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip placement="topLeft" title="Prompt Text" arrowPointAtCenter>
|
||||
<a-button>Arrow points to center / 箭头指向中心</a-button>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<md>
|
||||
## 箭头指向
|
||||
设置了 `arrowPointAtCenter` 后，箭头将指向目标元素的中心。
|
||||
</md>
|
||||
<a-tooltip placement="topLeft" title="Prompt Text">
|
||||
<a-button>Align edge / 边缘对齐</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip placement="topLeft" title="Prompt Text" arrowPointAtCenter>
|
||||
<a-button>Arrow points to center / 箭头指向中心</a-button>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,23 +1,26 @@
|
|||
<template>
|
||||
<div>
|
||||
<md>
|
||||
## 自动调整位置
|
||||
气泡框不可见时自动调整位置。
|
||||
</md>
|
||||
<div :style="wrapStyles">
|
||||
<Tooltip placement="left" title="Prompt Text" :getPopupContainer="getPopupContainer">
|
||||
<a-button>Adjust automatically / 自动调整</a-button>
|
||||
</Tooltip>
|
||||
<br />
|
||||
<Tooltip placement="left" title="Prompt Text" :getPopupContainer="getPopupContainer" :autoAdjustOverflow="false">
|
||||
<a-button>Ingore / 不处理</a-button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<cn>
|
||||
#### 自动调整位置
|
||||
气泡框不可见时自动调整位置
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Adjust placement automatically
|
||||
Adjust popup placement automatically when popup is invisible
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div :style="wrapStyles">
|
||||
<a-tooltip placement="left" title="Prompt Text" :getPopupContainer="getPopupContainer">
|
||||
<a-button>Adjust automatically / 自动调整</a-button>
|
||||
</a-tooltip>
|
||||
<br />
|
||||
<a-tooltip style="marginTop: 10px" placement="left" title="Prompt Text" :getPopupContainer="getPopupContainer" :autoAdjustOverflow="false">
|
||||
<a-button>Ingore / 不处理</a-button>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Tooltip, Button } from 'antd'
|
||||
const wrapStyles = {
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
|
|
@ -35,9 +38,7 @@ export default {
|
|||
return trigger.parentElement
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Tooltip,
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<cn>
|
||||
#### 基本
|
||||
最简单的用法。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Basic
|
||||
The simplest usage.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-tooltip>
|
||||
<template slot='title'>
|
||||
prompt text
|
||||
</template>
|
||||
Tooltip will show when mouse enter.
|
||||
</a-tooltip>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<md>
|
||||
## 基本
|
||||
最简单的用法。
|
||||
</md>
|
||||
<Tooltip>
|
||||
<template slot='title'>
|
||||
prompt text
|
||||
</template>
|
||||
Tooltip will show when mouse enter.
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Tooltip } from 'antd'
|
||||
export default {
|
||||
components: {
|
||||
Tooltip,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,30 +1,59 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Basic</h1>
|
||||
<Basic />
|
||||
<h1>ArrowCenter</h1>
|
||||
<ArrowCenter />
|
||||
<h1>AutoAdjust</h1>
|
||||
<AutoAdjust />
|
||||
<h1>Placement</h1>
|
||||
<Placement />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Basic from './basic'
|
||||
import ArrowCenter from './arrow-point-at-center'
|
||||
import AutoAdjust from './auto-adjust-overflow'
|
||||
import Placement from './placement'
|
||||
import Basic from './basic.md'
|
||||
import ArrowPointAtCenter from './arrow-point-at-center.md'
|
||||
import AutoAdjustOverflow from './auto-adjust-overflow.md'
|
||||
import Placement from './placement.md'
|
||||
import CN from '../index.zh-CN.md'
|
||||
import US from '../index.en-US.md'
|
||||
|
||||
const md = {
|
||||
cn: `# Tooltip
|
||||
|
||||
简单的文字提示气泡框。
|
||||
|
||||
## 何时使用
|
||||
|
||||
鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。
|
||||
|
||||
可用来代替系统默认的 'title' 提示，提供一个'按钮/文字/操作'的文案解释。
|
||||
## 代码演示`,
|
||||
us: `# Tooltip
|
||||
|
||||
A simple text popup tip.
|
||||
|
||||
# When To Use
|
||||
|
||||
- The tip is shown on mouse enter, and is hidden on mouse leave. The Tooltip doesn't support complex text or operations.
|
||||
- To provide an explanation of a 'button/text/operation'. It's often used instead of the html 'title' attribute.
|
||||
## Examples
|
||||
`,
|
||||
}
|
||||
export default {
|
||||
category: 'Components',
|
||||
subtitle: '文字提示',
|
||||
type: 'Data Display',
|
||||
title: 'Tooltip',
|
||||
components: {
|
||||
Basic,
|
||||
ArrowCenter,
|
||||
AutoAdjust,
|
||||
Placement,
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<md cn={md.cn} us={md.us}/>
|
||||
<br/>
|
||||
<Basic />
|
||||
<br/>
|
||||
<Placement />
|
||||
<br/>
|
||||
<ArrowPointAtCenter />
|
||||
<br/>
|
||||
<AutoAdjustOverflow />
|
||||
<br/>
|
||||
<api>
|
||||
<template slot='cn'>
|
||||
<CN/>
|
||||
</template>
|
||||
<US/>
|
||||
</api>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,117 @@
|
|||
<cn>
|
||||
#### 位置
|
||||
位置有 12 个方向。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Placement
|
||||
The ToolTip has 12 placements choice.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div id="components-a-tooltip-demo-placement">
|
||||
<div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
|
||||
<a-popconfirm placement="topLeft" >
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<a-button>TL</a-button>
|
||||
</a-popconfirm>
|
||||
<a-popconfirm placement="top" >
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<a-button>Top</a-button>
|
||||
</a-popconfirm>
|
||||
<a-popconfirm placement="topRight" >
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<a-button>TR</a-button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
<div :style="{ width: `${buttonWidth}px`, float: 'left' }">
|
||||
<a-popconfirm placement="leftTop" >
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<a-button>LT</a-button>
|
||||
</a-popconfirm>
|
||||
<a-popconfirm placement="left" >
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<a-button>Left</a-button>
|
||||
</a-popconfirm>
|
||||
<a-popconfirm placement="leftBottom" >
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<a-button>LB</a-button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
<div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}">
|
||||
<a-popconfirm placement="rightTop" >
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<a-button>RT</a-button>
|
||||
</a-popconfirm>
|
||||
<a-popconfirm placement="right" >
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<a-button>Right</a-button>
|
||||
</a-popconfirm>
|
||||
<a-popconfirm placement="rightBottom" >
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<a-button>RB</a-button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
<div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
|
||||
<a-popconfirm placement="bottomLeft" >
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<a-button>BL</a-button>
|
||||
</a-popconfirm>
|
||||
<a-popconfirm placement="bottom" >
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<a-button>Bottom</a-button>
|
||||
</a-popconfirm>
|
||||
<a-popconfirm placement="bottomRight" >
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<a-button>BR</a-button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { message } from 'antd'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
buttonWidth: 70,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
#components-a-tooltip-demo-placement .ant-btn {
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
|
@ -1,112 +0,0 @@
|
|||
<template>
|
||||
<div id="components-tooltip-demo-placement">
|
||||
<md>
|
||||
## 位置
|
||||
位置有 12 个方向。
|
||||
</md>
|
||||
<div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
|
||||
<Tooltip placement="topLeft">
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<a-button>TL</a-button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="top">
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<a-button>Top</a-button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="topRight">
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<a-button>TR</a-button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div :style="{ width: `${buttonWidth}px`, float: 'left' }">
|
||||
<Tooltip placement="leftTop">
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<a-button>LT</a-button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="left">
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<a-button>Left</a-button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="leftBottom">
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<a-button>LB</a-button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}">
|
||||
<Tooltip placement="rightTop">
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<a-button>RT</a-button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="right">
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<a-button>Right</a-button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="rightBottom">
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<a-button>RB</a-button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
|
||||
<Tooltip placement="bottomLeft">
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<a-button>BL</a-button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="bottom">
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<a-button>Bottom</a-button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="bottomRight">
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<a-button>BR</a-button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Tooltip, Button } from 'antd'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
buttonWidth: 70,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Tooltip,
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
#components-tooltip-demo-placement .ant-btn {
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
## API
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| title | The text shown in the tooltip | string\|slot | - |
|
||||
|
||||
### Common API
|
||||
|
||||
The following APIs are shared by Tooltip, Popconfirm, Popover.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| arrowPointAtCenter | Whether the arrow is pointed at the center of target | boolean | `false` |
|
||||
| autoAdjustOverflow | Whether to adjust popup placement automatically when popup is off screen | boolean | `true` |
|
||||
| defaultVisible | Whether the floating tooltip card is visible by default | boolean | `false` |
|
||||
| getPopupContainer | The DOM container of the tip, the default behavior is to create a `div` element in `body`. | Function(triggerNode) | () => document.body |
|
||||
| mouseEnterDelay | Delay in seconds, before tooltip is shown on mouse enter | number | 0 |
|
||||
| mouseLeaveDelay | Delay in seconds, before tooltip is hidden on mouse leave | number | 0.1 |
|
||||
| overlayClassName | Class name of the tooltip card | string | - |
|
||||
| overlayStyle | Style of the tooltip card | object | - |
|
||||
| placement | The position of the tooltip relative to the target, which can be one of `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` |
|
||||
| trigger | Tooltip trigger mode | `hover` \| `focus` \| `click` | `hover` |
|
||||
| visible | Whether the floating tooltip card is visible or not | boolean | `false` |
|
||||
|
||||
### events
|
||||
| Events Name | Description | Arguments |
|
||||
| --- | --- | --- |
|
||||
| visibleChange | Callback executed when visibility of the tooltip card is changed | (visible) => void | - |
|
||||
|
||||
## Note
|
||||
|
||||
Please ensure that the child node of `Tooltip` accepts `mouseenter`, `mouseleave`, `focus`, `click` events.
|
||||
|
|
@ -1,23 +1,8 @@
|
|||
---
|
||||
category: Components
|
||||
subtitle: 文字提示
|
||||
type: Data Display
|
||||
title: Tooltip
|
||||
---
|
||||
|
||||
简单的文字提示气泡框。
|
||||
|
||||
## 何时使用
|
||||
|
||||
鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。
|
||||
|
||||
可用来代替系统默认的 `title` 提示，提供一个`按钮/文字/操作`的文案解释。
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| title | 提示文字 | `string` `function` `slot` | 无 |
|
||||
| title | 提示文字 | string\|slot | 无 |
|
||||
|
||||
### 共同的 API
|
||||
|
||||
|
|
@ -25,8 +10,9 @@ title: Tooltip
|
|||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| arrowPointAtCenter | 箭头是否指向目标元素中 | boolean | `false` |
|
||||
| arrowPointAtCenter | 箭头是否指向目标元素中心 | boolean | `false` |
|
||||
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | `true` |
|
||||
| defaultVisible | 默认是否显隐 | boolean | false |
|
||||
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | Function(triggerNode) | () => document.body |
|
||||
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0 |
|
||||
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 |
|
||||
|
|
@ -34,12 +20,13 @@ title: Tooltip
|
|||
| overlayStyle | 卡片样式 | object | 无 |
|
||||
| placement | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | top |
|
||||
| trigger | 触发行为，可选 `hover/focus/click` | string | hover |
|
||||
| visible(v-model) | 用于手动控制浮层显隐 | boolean | false |
|
||||
| visible | 用于手动控制浮层显隐 | boolean | false |
|
||||
| onVisibleChange | 显示隐藏的回调 | (visible) => void | 无 |
|
||||
|
||||
### 事件
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| visibleChange | 显示隐藏变换时触发 | (visible) |
|
||||
|
||||
| --- | --- | --- |
|
||||
| visibleChange | 显示隐藏的回调 | (visible) => void |
|
||||
## 注意
|
||||
|
||||
请确保 `Tooltip` 的子元素能接受 `mouseenter`、`mouseleave`、`focus`、`click` 事件。
|
||||
|
|
|
|||
Loading…
Reference in New Issue