<template>
  <div
    v-if="hoveredId !== 0"
    class="card tooltip"
    :style="{ left: leftShift + 'px', top: topShift + 'px' }"
  >
    <p style="font-weight: 700">
      {{ title }}
    </p>
    {{ message }}

    <img v-if="photo" :src="src" />
    <!-- <p>{{ message }}</p> -->
  </div>
</template>

<script>
export default {
  props: {
    hoveredId: {
      type: Number,
      required: false,
      default: 1
    },
    leftShift: {
      type: Number,
      required: false,
      default: 0
    },
    topShift: {
      type: Number,
      required: false,
      default: 0
    },
    title: {
      type: String,
      required: true
    },
    message: {
      type: String,
      required: false,
      default: ''
    },
    photo: {
      type: String,
      required: false,
      default: null
    }
  },
  computed: {
    src() {
      try {
        return require(`@/assets/mockphotos/${this.photo}.jpg`)
      } catch (err) {
        return require('@/assets/mockphotos/cat1.jpg')
      }
    }
  }
}
</script>

<style lang="sass" scoped>

.tooltip
  position: absolute
  padding: 0.2rem
  width: 200px
  //height: 50px
  border-radius: 5px
  text-overflow: ellipsis
  white-space: nowrap
  overflow: hidden
</style>
