app/components/Ui/Help.vue

<template>
  <v-tooltip
    :value="show"
    :top="top"
    :bottom="bottom"
    :right="right"
    :left="leftOrDefault"
    :open-on-hover="false"
    :open-on-focus="false"
    :open-on-click="false"
    max-width="360px"
  >
    <template #activator="{}">
      <v-icon
        @click="onIconClicked"
        icon
        class="ml-3"
        size="18px"
        ref="iconRef"
      >
        {{ icon }}
      </v-icon>
    </template>

    <div ref="slotDiv" class="tooltip" v-click-out="onClickOutside">
      <slot></slot>
    </div>
  </v-tooltip>
</template>

<script setup lang="ts">
import type {Ref} from "@vue/reactivity";

const props = defineProps({
  left: {
    type: Boolean,
    required: false,
    default: false
  },
  right: {
    type: Boolean,
    required: false,
    default: false
  },
  top: {
    type: Boolean,
    required: false,
    default: false
  },
  bottom: {
    type: Boolean,
    required: false,
    default: false
  },
  icon: {
    type: String,
    required: false,
    default: 'mdi-help-circle'
  }
})

const { $refs } = useNuxtApp()

const show: Ref<Boolean> = ref(false)

// Template reference to the icon object
const iconRef = ref(null)

// Left is the default, set it to true if not any other is true
const leftOrDefault: Ref<Boolean> = ref(props.left || (!props.right && !props.bottom && !props.top))

const onIconClicked = (e: any) => {
  show.value = !show.value
  e.stopPropagation()
}

const onClickOutside = (e: any) => {
  if (show.value) {
    if (e.target === (iconRef.value as any).$el) {
      return
    }
    show.value = false
  }
}
</script>

<style>
.v-icon {
  cursor: pointer;
  height: 18px;
  width: 18px;
}
.v-tooltip__content {
  pointer-events: all !important;
}
</style>