项目作者: KABBOUCHI

项目描述 :
VueJS Tooltip powered by Tippy.js
高级语言: JavaScript
项目地址: git://github.com/KABBOUCHI/vue-tippy.git
创建时间: 2017-04-30T14:48:57Z
项目社区:https://github.com/KABBOUCHI/vue-tippy

开源协议:MIT License

下载


VueTippy - V6

npm vue2 download

Vue.js 3 wrapper for Tippy.js

Documentation

For full v6 documentation, visit https://vue-tippy.netlify.app/.

Installation

  1. npm install vue-tippy@v6
  2. //or
  3. yarn add vue-tippy@v6

Configuration (optional)

  1. import { createApp } from 'vue'
  2. import VueTippy from 'vue-tippy'
  3. // or
  4. import { plugin as VueTippy } from 'vue-tippy'
  5. const app = createApp({})
  6. app.use(
  7. VueTippy,
  8. // optional
  9. {
  10. directive: 'tippy', // => v-tippy
  11. component: 'tippy', // => <tippy></tippy>
  12. }
  13. )
  14. app.mount('#app')

Usage

Vue Directive

  1. <template>
  2. <button v-tippy="{ content: 'Hi!' }">Tippy!</button>
  3. <button v-tippy="'Hello!'">Tippy!</button>
  4. </template>
  5. <script setup>
  6. import { directive as VTippy } from 'vue-tippy'
  7. </script>

Vue Component

  1. <template>
  2. <Tippy content="Hi!">
  3. <button>Tippy!</button>
  4. </Tippy>
  5. </template>
  6. <script setup>
  7. import { Tippy } from 'vue-tippy'
  8. </script>

Using composition api

  1. import { defineComponent, ref, h } from 'vue'
  2. import { useTippy } from 'vue-tippy'
  3. export default defineComponent({
  4. setup() {
  5. const button = ref()
  6. useTippy(button, {
  7. content: 'Hi!',
  8. })
  9. return () => h('button', { ref: button }, 'Tippy!')
  10. },
  11. })