Tooltip 文字提示

    文字提示气泡框，在鼠标悬停时显示，代替了系统的提示。

    基础用法

    最简单的用法。

    注意 Tooltip 内的文本使用了 white-space: nowrap;，即不自动换行，如需展示很多内容并自动换行时，建议给内容 slot 增加样式 white-space: normal;。

    Tooltip 文字提示 - 图2

    位置 

    1. <style scoped>
    2.     .top,.bottom{
    3.         text-align: center;
    4.     }
    5.     .center{
    6.         width: 300px;
    7.         margin: 10px auto;
    8.         overflow: hidden;
    9.     }
    10.     .center-left{
    11.         float: left;
    12.     }
    13.     .center-right{
    14.         float: right;
    15.     }
    16. </style>
    17. <template>
    18.     <div class="top">
    19.         <Tooltip content="Top Left text" placement="top-start">
    20.             <Button>Top Left</Button>
    21.         </Tooltip>
    22.         <Tooltip content="Top Center text" placement="top">
    23.             <Button>Top Center</Button>
    24.         </Tooltip>
    25.         <Tooltip content="Top Right text" placement="top-end">
    26.             <Button>Top Right</Button>
    27.         </Tooltip>
    28.     <div class="center">
    29.         <div class="center-left">
    30.             <Tooltip content="Left Top text" placement="left-start">
    31.                 <Button>Left Top</Button>
    32.             </Tooltip><br><br>
    33.             <Tooltip content="Left Center text" placement="left">
    34.                 <Button>Left Center</Button>
    35.             </Tooltip><br><br>
    37.                 <Button>Left Bottom</Button>
    38.             </Tooltip>
    39.         </div>
    40.         <div class="center-right">
    41.             <Tooltip content="Right Top text" placement="right-start">
    42.                 <Button>Right Top</Button>
    43.             </Tooltip><br><br>
    44.             <Tooltip content="Right Center text" placement="right">
    45.                 <Button>Right Center</Button>
    46.             </Tooltip><br><br>
    47.             <Tooltip content="Right Bottom text" placement="right-end">
    48.                 <Button>Right Bottom</Button>
    49.             </Tooltip>
    50.         </div>
    51.     </div>
    52.     <div class="bottom">
    53.         <Tooltip content="Bottom Left text" placement="bottom-start">
    54.             <Button>Bottom Left</Button>
    55.         </Tooltip>
    56.         <Tooltip content="Bottom Center text" placement="bottom">
    57.             <Button>Bottom Center</Button>
    58.         </Tooltip>
    59.         <Tooltip content="Bottom Right text" placement="bottom-end">
    60.             <Button>Bottom Right</Button>
    61.     </div>
    62. </template>
    63. <script>
    64.     export default {
    66.     }
    67. </script>

    自定义内容

    通过自定义 slot 显示多行文本或更复杂的样式。

    Tooltip 文字提示 - 图4

    禁用

    通过设置属性disabled可以禁用文字提示。

    1. <template>
    2.     <Tooltip placement="top" content="Can disable text prompts" :disabled="disabled">
    3.         <Button @click="disabled = true">Click to close</Button>
    4.     </Tooltip>
    5. </template>
    7.     export default {
    8.         data () {
    9.             return {
    10.                 disabled: false
    11.             }
    12.         }
    13.     }
    14. </script>

    延时

    Tooltip 文字提示 - 图6

    主题

    设置属性 theme 可以显示不同的颜色。

    1. <template>
    2.     <Tooltip content="content of tooltip">
    3.         <Button>Dark(default)</Button>
    4.     </Tooltip>
    5.     <Tooltip content="content of tooltip" theme="light">
    6.         <Button>Light</Button>
    7.     </Tooltip>
    8. </template>
    9. <script>
    10.     export default {
    12.     }

    自动换行

    设置属性 max-width，当超出最大值后，文本将自动换行，并两端对齐。