Custom Tooltip Component For Vue.js

Install & Download:

# Yarn
$ yarn add @adamdehaven/vue-custom-tooltip
# NPM
$ npm i @adamdehaven/vue-custom-tooltip

Description:

Yet another customizable, reusable, reactive tooltip component for Vue.js 3 and 2.

How to use it:

1. Import and register the custom tooltip component.

import Vue from 'vue'
import VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'

Vue.use(VueCustomTooltip,{
  // OPTIONS HERE
})

// or
export default {
  components: {
    VueCustomTooltip,
  },
}

2. Attach the tooltip to an element you specify.

<VueCustomTooltip label="This is a tooltip">
  Hover Me
</VueCustomTooltip>

3. Available component props.

label: {
  handler(value) {
    this.labelText = value
  },
  immediate: true,
},
active: {
  handler(value) {
    this.isActive = value
  },
  immediate: true,
},
sticky: {
  handler(value) {
    this.isSticky = value
  },
  immediate: true,
},
multiline: {
  handler(value) {
    this.isMultiline = value
  },
  immediate: true,
},
underlined: {
  handler(value) {
    this.isUnderlined = value
  },
  immediate: true,
},
abbreviation: {
  handler(value) {
    this.isAbbreviation = value
  },
  immediate: true,
},
position: {
  // is-top / is-bottom / is-left / is-right
  handler(value) {
    this.hasPosition = value
  },
  immediate: true,
},
size: {
  // is-small / is-medium / is-large
  handler(value) {
    this.hasSize = value
  },
  immediate: true,
},

4. Default options.

Vue.use(VueCustomTooltip, {
  name: 'VueCustomTooltip',
  color: '#fff',
  background: '#000',
  borderRadius: 12,
  fontWeight: 400,
})

Preview:

Changelog:

v2.0.4 (06/12/2021)

• Adjusting multiline and size props

v2.0.3 (06/12/2021)

• Adding tooltip max width

v2.0.2 (06/10/2021)

• Updating tooltip top padding

v2.0.1 (06/09/2021)

• Vue 3 and TypeScript support