:::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.
```html
<divclass="box">
<divclass="top">
<el-tooltipclass="item"effect="dark"content="Top Left prompts info"placement="top-start">
<el-button>top-start</el-button>
</el-tooltip>
<el-tooltipclass="item"effect="dark"content="Top Center prompts info"placement="top">
<el-button>top</el-button>
</el-tooltip>
<el-tooltipclass="item"effect="dark"content="Top Right prompts info"placement="top-end">
<el-button>top-end</el-button>
</el-tooltip>
</div>
<divclass="left">
<el-tooltipclass="item"effect="dark"content="Left Top prompts info"placement="left-start">
<el-button>left-start</el-button>
</el-tooltip>
<el-tooltipclass="item"effect="dark"content="Left Center prompts info"placement="left">
In addition to basic usages, there are some attributes that allow you to customize your own:
`transition` attribute allows you to customize the animation in which the tooltip shows or hides, and the default value is el-fade-in-linear.
`disabled` attribute allows you to disable `tooltip`. You just need set it to `true`.
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.
:::demo
```html
<template>
<el-tooltip:disabled="disabled"content="click to close tooltip function"placement="bottom"effect="light">
<el-button@click="disabled =!disabled">click to {{disabled ? 'active' : 'close'}} tooltip function</el-button>
</el-tooltip>
</template>
<script>
export default {
data() {
return {
disabled: false
};
}
};
</script>
<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>
```
:::
:::tip
The `router-link` component is not supported in tooltip, please use `vm.$router.push`.
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.
