基于 Vue 智能提示组件V-Tooltip

今天给大家推荐一个超棒的Vue下拉式/移动式/tooltips提示组件VTooltip。

v-tooltip 基于 vue.js 构建的轻量级 工具提示条、弹出窗口、下拉式提示 组件。star高达1.6K。

安装

$ npm i v-tooltip -S

# 浏览器/CDN
<script src="https://unpkg.com/v-tooltip"></script>

引入插件

import Vue from 'vue'
import VTooltip from 'v-tooltip'

Vue.use(VTooltip)

使用

<template>
  <div class="example">
    <!-- 通过指令 v-tooltip 使用 -->
    <button v-tooltip.top-center="msg">Hover me</button>
    
    <button v-tooltip="{
      content: msg,
      placement: 'bottom-center',
      classes: ['info'],
      targetClasses: ['it-has-a-tooltip'],
      offset: 100,
      delay: {
        show: 500,
        hide: 300,
      },
    }">Hover me</button>
    
    <!-- 通过组件v-popover使用 -->
	<v-popover offset="16" placement="bottom" autoHide="true">
      <button class="tooltip-target">Click me</button>
      
      <template slot="popover">
        <input class="tooltip-content" v-model="msg" placeholder="Tooltip content" />
		<p>{{ msg }}</p>
        <ExampleComponent />
        
        <a v-close-popover>Close</a>
        <a v-close-popover.all>Close All</a>
      </template>
    </v-popover>
  </div>
</template>
<script>
export default {
  data() {
	return {
		msg: 'This is a button.'
	}
  }
}
</script>

# 示例地址
https://akryum.github.io/v-tooltip/

# 仓库地址
https://github.com/Akryum/v-tooltip

okay，就分享到这里。喜欢的话多支持下，希望对大家有些许帮助哈~~