<template>
  <span>
    <span v-h:81="48" v-w:1068="48" v-x:1068="948" v-y:81="17" class="tooltip-area"></span>
    <img
      v-h:81="24"
      v-w:1068="62"
      v-x:1068="941"
      v-y:81="55"
      src="~/assets/images/desktop/common/contracts/tooltip-services.png"
    />

    <template v-if="showDokumente">
      <span v-h:81="48" v-w:1068="48" v-x:1068="1004" v-y:81="17" class="tooltip-area"></span>
      <img
        v-h:81="24"
        v-w:1068="78"
        v-x:1068="989"
        v-y:81="55"
        src="~/assets/images/desktop/common/contracts/tooltip-dokumente.png"
      />
    </template>
  </span>
</template>

<script lang="ts" setup>
defineProps({
  showDokumente: {
    type: Boolean,
    default: true,
  },
})
</script>

<style scoped>
.tooltip-area {
  position: absolute;
}

img {
  position: absolute;
  opacity: 0 !important;
}

.tooltip-area:hover + img {
  opacity: 1 !important;
}
</style>
