🖖 Vue Image Hotspot Component Plugin For Vue.js

vue-hotspot is an image note component that adds interactive touch points with tooltips to your images.

add hotspot to image, image hotspot in html, image hotspot example, responsive image hotspots, image hotspot plugin

JavaScript Positioning for Tooltips, Popovers, Dropdowns Library

How to make use of it:

Installation:

$ npm install vue-hotspot --save

$ yarn add vue-hotspot

ES Modules with npm (Recommended).

import Vue from 'vue'
import VueHotspot from 'vue-hotspot' // refers to components/VueHotspot.vue in webpack

Using the component.

<template>
  <v-hotspot
    :init-options="hotspotConfig"
    @save-data="saveData"
    @after-delete="afterDelete" />
</template>

<script>
import Vue from 'vue'
import VueHotspot from 'vue-hotspot'
export default {
  components: {
    'v-hotspot': VueHotspot
  },
  data () {
    return {
      hotspotConfig: {
        image: 'your-image-url.png',
        editable: true,
        interactivity: 'hover',
        data: [
          { Message: 'A prepopulated hotspot', Title: 'Vue Hotspot 1', x: 33.3, y: 58.33 },
          { Message: 'Another prepopulated hotspot', Title: 'Vue Hotspot 2', x: 53.3, y: 78.3 }
        ],
        hotspotColor: '#85ce61',
        messageBoxColor: '#409eff',
        textColor: '#333',
        opacity: 0.9
      }
    }
  },
  methods: {
    saveData (data) {
      // Do something with the list of hotspots
      console.log(data)
    },
    afterDelete () {
      // Do something after delete
      console.log('Do something after delete ...')
    }
  }
}
</script>

Add Hotspot To Your Image, vue-hotspot Plugin/Github