[JavaScript知识库] 040_Tooltip文字提示

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 040_Tooltip文字提示 -> 正文阅读

[JavaScript知识库]040_Tooltip文字提示

1. Tooltip文字提示

1.1. Tooltip文字提示常用于展示鼠标hover时的提示信息。

1.2. Attributes

参数	说明	类型	可选值	默认值
effect	默认提供的主题	String	dark/light	dark
content	显示的内容, 也可以通过slot#content传入DOM	String	无	无
placement	Tooltip的出现位置	String	top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end	bottom
value / v-model	?状态是否可见	Boolean	无	false
disabled	Tooltip是否可用	Boolean	无	false
offset	出现位置的偏移量	Number	无	0
transition	定义渐变动画	String	无	el-fade-in-linear
visible-arrow	是否显示Tooltip箭头, 更多参数可见Vue-popper	Boolean	无	true
popper-options	popper.js的参数	Object	参考popper.js文档	{ boundariesElement: 'body', gpuAcceleration: false }
open-delay	延迟出现, 单位毫秒	Number	无	0
manual	手动控制模式, 设置为true后, mouseenter和mouseleave事件将不会生效	Boolean	无	false
popper-class	为Tooltip的popper添加类名	String	无	无
enterable	鼠标是否可进入到tooltip中	Boolean	无	true
hide-after	Tooltip出现后自动隐藏延时, 单位毫秒, 为0则不会自动隐藏	Number	无	0
tabindex	Tooltip组件的tabindex	Number	无	0

2. Tooltip文字提示例子

2.1. 使用脚手架新建一个名为element-ui-tooltip的前端项目, 同时安装Element插件。

2.2. 编辑index.js?

import Vue from 'vue'
import VueRouter from 'vue-router'
import Tooltip from '../components/Tooltip.vue'
import EffectTooltip from '../components/EffectTooltip.vue'
import SlotContentTooltip from '../components/SlotContentTooltip.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/Tooltip' },
  { path: '/Tooltip', component: Tooltip },
  { path: '/EffectTooltip', component: EffectTooltip },
  { path: '/SlotContentTooltip', component: SlotContentTooltip }
]

const router = new VueRouter({
  routes
})

export default router

2.3. 在components下创建Tooltip.vue

<template>
  <div>
    <h1>基础用法</h1>
    <h4>使用content属性来决定hover时的提示信息。由placement属性决定展示效果: placement属性值为: 方向-对齐位置; 四个方向: top、left、right、bottom; 三种对齐位置: start, end, 默认为空。如placement="left-end", 则提示信息出现在目标元素的左侧, 且提示信息的底部与目标元素的底部对齐。</h4>
    <div class="box">
      <div class="top">
        <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
          <el-button>上左</el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
          <el-button>上边</el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">
          <el-button>上右</el-button>
        </el-tooltip>
      </div>
      <div class="left">
        <el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">
          <el-button>左上</el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">
          <el-button>左边</el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">
          <el-button>左下</el-button>
        </el-tooltip>
      </div>

      <div class="right">
        <el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">
          <el-button>右上</el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
          <el-button>右边</el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">
          <el-button>右下</el-button>
        </el-tooltip>
      </div>
      <div class="bottom">
        <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
          <el-button>下左</el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
          <el-button>下边</el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">
          <el-button>下右</el-button>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .box {
    width: 400px;
    margin: 0 auto;
  }
  .top {
    text-align: center;
  }
  .left {
    float: left;
    width: 60px;
  }
  .right {
    float: right;
    width: 60px;
  }
  .bottom {
    clear: both;
    text-align: center;
  }
  .item {
    margin: 4px;
  }
</style>

2.4. 在components下创建EffectTooltip.vue

<template>
  <div>
    <h1>主题</h1>
    <h4>通过设置effect属性来改变主题, 默认为dark。</h4>
    <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>
  </div>
</template>

2.5. 在components下创建SlotContentTooltip.vue

<template>
  <div>
    <h1>更多Content</h1>
    <h4>用具名slot分发content, 替代tooltip中的content属性。</h4>
    <el-tooltip placement="right-start">
      <div slot="content">多行信息<br/>第二行信息</div>
      <el-button>right start</el-button>
    </el-tooltip>
  </div>
</template>

2.6. 运行项目, 访问http://localhost:8080/#/Tooltip