2016-11-13 22:00:55 +08:00
## Tooltip
2016-11-10 21:46:55 +08:00
2016-11-13 22:00:55 +08:00
Display prompt information for mouse hover.
2016-11-10 21:46:55 +08:00
2016-11-13 22:00:55 +08:00
### Basic usage
2016-11-10 21:46:55 +08:00
2016-11-13 22:00:55 +08:00
Tooltip has 9 placements.
2016-11-10 21:46:55 +08:00
2016-11-13 22:00:55 +08:00
:::demo Use attribute `content` to set the display content when hover. The attribute `placement` determines the position of the tooltip. Its value is `[orientation]-[alignment]` with four orientations `top` , `left` , `right` , `bottom` and three alignments `start` , `end` , `null` , and the default alignment is null. Take `placement="left-end"` for example, Tooltip will display on the left of the element which you are hovering and the bottom of the tooltip aligns with the bottom of the element.
2016-11-10 21:46:55 +08:00
```html
< div class = "box" >
< div class = "top" >
< el-tooltip class = "item" effect = "dark" content = "Top Left prompts info" placement = "top-start" >
< el-button > top-start< / el-button >
< / el-tooltip >
< el-tooltip class = "item" effect = "dark" content = "Top Center prompts info" placement = "top" >
< el-button > top< / el-button >
< / el-tooltip >
< el-tooltip class = "item" effect = "dark" content = "Top Right prompts info" placement = "top-end" >
< el-button > top-end< / el-button >
< / el-tooltip >
< / div >
< div class = "left" >
< el-tooltip class = "item" effect = "dark" content = "Left Top prompts info" placement = "left-start" >
< el-button > left-start< / el-button >
< / el-tooltip >
< el-tooltip class = "item" effect = "dark" content = "Left Center prompts info" placement = "left" >
< el-button > left< / el-button >
< / el-tooltip >
< el-tooltip class = "item" effect = "dark" content = "Left Bottom prompts info" placement = "left-end" >
< el-button > left-end< / el-button >
< / el-tooltip >
< / div >
< div class = "right" >
< el-tooltip class = "item" effect = "dark" content = "Right Top prompts info" placement = "right-start" >
< el-button > right-start< / el-button >
< / el-tooltip >
< el-tooltip class = "item" effect = "dark" content = "Right Center prompts info" placement = "right" >
< el-button > right< / el-button >
< / el-tooltip >
< el-tooltip class = "item" effect = "dark" content = "Right Bottom prompts info" placement = "right-end" >
< el-button > right-end< / el-button >
< / el-tooltip >
< / div >
< div class = "bottom" >
< el-tooltip class = "item" effect = "dark" content = "Bottom Left prompts info" placement = "bottom-start" >
< el-button > bottom-start< / el-button >
< / el-tooltip >
< el-tooltip class = "item" effect = "dark" content = "Bottom Center prompts info" placement = "bottom" >
< el-button > bottom< / el-button >
< / el-tooltip >
< el-tooltip class = "item" effect = "dark" content = "Bottom Right prompts info" placement = "bottom-end" >
< el-button > bottom-end< / el-button >
< / el-tooltip >
< / div >
< / div >
2016-11-14 18:10:52 +08:00
< style >
.box {
width: 400px;
.top {
text-align: center;
}
.left {
float: left;
width: 110px;
}
.right {
float: right;
width: 110px;
}
.bottom {
clear: both;
text-align: center;
}
.item {
margin: 4px;
}
2017-01-06 16:15:11 +08:00
2016-11-14 18:10:52 +08:00
.left .el-tooltip__popper,
.right .el-tooltip__popper {
padding: 8px 10px;
}
2017-01-06 16:15:11 +08:00
2016-11-14 18:10:52 +08:00
.el-button {
width: 110px;
}
}
< / style >
2016-11-10 21:46:55 +08:00
```
:::
### Theme
2016-11-13 22:00:55 +08:00
Tooltip has two themes: `dark` and `light` 。
2016-11-10 21:46:55 +08:00
2016-11-13 22:00:55 +08:00
:::demo Set `effect` to modify theme, and the default value is `dark` .
2016-11-10 21:46:55 +08:00
```html
< el-tooltip content = "Top center" placement = "top" >
< el-button > Dark< / el-button >
< / el-tooltip >
< el-tooltip content = "Bottom center" placement = "bottom" effect = "light" >
< el-button > Light< / el-button >
< / el-tooltip >
```
:::
### More Content
2017-01-06 16:15:11 +08:00
Display multiple lines of text and set their format.
2016-11-10 21:46:55 +08:00
2016-11-13 22:00:55 +08:00
:::demo Override attribute `content` of `el-tooltip` by adding a slot named `content` .
2016-11-10 21:46:55 +08:00
```html
< el-tooltip placement = "top" >
< div slot = "content" > multiple lines< br / > second line< / div >
< el-button > Top center< / el-button >
< / el-tooltip >
```
:::
2016-11-13 22:00:55 +08:00
### Advanced usage
2016-11-10 21:46:55 +08:00
2016-11-13 22:00:55 +08:00
In addition to basic usages, there are some attributes that allow you to customize your own:
2016-11-10 21:46:55 +08:00
2017-03-23 17:57:14 +08:00
`transition` attribute allows you to customize the animation in which the tooltip shows or hides, and the default value is el-fade-in-linear.
2016-11-10 21:46:55 +08:00
2016-11-13 22:00:55 +08:00
`disabled` attribute allows you to disable `tooltip` . You just need set it to `true` .
2016-11-10 21:46:55 +08:00
2016-11-13 22:00:55 +08:00
In fact, Tooltip is an extension based on [Vue-popper ](https://github.com/element-component/vue-popper ), you can use any attribute that are allowed in Vue-popper.
2016-11-10 21:46:55 +08:00
:::demo
```html
< template >
< el-tooltip :disabled = "disabled" content = "click to close tooltip function" placement = "bottom" effect = "light" >
2017-01-06 16:15:11 +08:00
< el-button @click =" disabled = !disabled" > click to {{disabled ? 'active' : 'close'}} tooltip function</ el-button >
2016-11-10 21:46:55 +08:00
< / el-tooltip >
< / template >
2019-03-18 22:39:59 +08:00
< script >
export default {
data() {
return {
disabled: false
};
}
};
< / script >
2016-11-10 21:46:55 +08:00
< style >
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .expand-fade-leave-active {
margin-left: 20px;
opacity: 0;
}
< / style >
```
:::
2017-03-24 15:38:31 +08:00
:::tip
The `router-link` component is not supported in tooltip, please use `vm.$router.push` .
2017-04-04 17:57:51 +08:00
2017-11-03 10:46:00 +08:00
Disabled form elements are not supported for Tooltip, more information can be found at [MDN ](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter ). You need to wrap the disabled form element with a container element for Tooltip to work.
2017-03-24 15:38:31 +08:00
:::
2016-11-10 21:46:55 +08:00
### Attributes
2016-11-13 22:00:55 +08:00
| Attribute | Description | Type | Accepted Values | Default |
|----------------|---------|-----------|-------------|--------|
| effect | Tooltip theme | string | dark/light | dark |
| content | display content, can be overridden by `slot#content` | String | — | — |
| placement | position of Tooltip | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
2019-01-23 11:34:19 +08:00
| value / v-model | visibility of Tooltip | boolean | — | false |
2016-11-13 22:00:55 +08:00
| disabled | whether Tooltip is disabled | boolean | — | false |
| offset | offset of the Tooltip | number | — | 0 |
2017-03-23 17:57:14 +08:00
| transition | animation name | string | — | el-fade-in-linear |
2016-11-13 22:00:55 +08:00
| visible-arrow | whether an arrow is displayed. For more information, check [Vue-popper ](https://github.com/element-component/vue-popper ) page | boolean | — | true |
2017-04-06 18:45:40 +08:00
| popper-options | [popper.js ](https://popper.js.org/documentation.html ) parameters | Object | refer to [popper.js ](https://popper.js.org/documentation.html ) doc | `{ boundariesElement: 'body', gpuAcceleration: false }` |
2017-03-24 15:38:31 +08:00
| open-delay | delay of appearance, in millisecond | number | — | 0 |
2017-03-16 10:47:27 +08:00
| manual | whether to control Tooltip manually. `mouseenter` and `mouseleave` won't have effects if set to `true` | boolean | — | false |
2016-12-20 16:38:47 +08:00
| popper-class | custom class name for Tooltip's popper | string | — | — |
2017-04-19 18:32:14 +08:00
| enterable | whether the mouse can enter the tooltip | Boolean | — | true |
2017-09-14 10:45:25 +08:00
| hide-after | timeout in milliseconds to hide tooltip | number | — | 0 |