zammad/app/frontend/shared/components/CommonTooltip/useTooltipControls.ts

// Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/

import { onKeyStroke, useEventListener } from '@vueuse/core'
import { ref, type Ref } from 'vue'

import stopEvent from '#shared/utils/events.ts'

import type { TooltipVisualConfig } from './types.ts'

export const useTooltipControls = (
  tooltipTrigger: Ref<HTMLElement | undefined>,
  tooltipConfig: TooltipVisualConfig,
) => {
  const tooltipVisible = ref(false)

  const hideTooltip = () => {
    tooltipVisible.value = false
  }

  const showTooltip = () => {
    tooltipVisible.value = true
  }

  if (tooltipConfig.type === 'inline') {
    useEventListener(tooltipTrigger, 'focus', showTooltip)
    useEventListener(tooltipTrigger, 'blur', hideTooltip)

    useEventListener(tooltipTrigger, 'mouseenter', showTooltip)
    useEventListener(tooltipTrigger, 'mouseleave', hideTooltip)
  }

  onKeyStroke('Escape', (e) => {
    stopEvent(e)
    hideTooltip()
  })

  return {
    tooltipVisible,
    showTooltip,
    hideTooltip,
  }
}