Tooltip

<script setup lang="ts">
import { onBeforeUnmount, ref, useId } from 'vue'
import { provideTooltip } from './context'

const props = withDefaults(
  defineProps<{
    /** Hover time before the tooltip appears, in ms. Keyboard focus shows it immediately. */
    delay?: number
    disabled?: boolean
  }>(),
  { delay: 300 },
)

const open = defineModel<boolean>('open', { default: false })
let timer: ReturnType<typeof setTimeout> | undefined

function show(immediate = false) {
  clearTimeout(timer)
  if (props.disabled) return
  if (immediate || open.value) open.value = true
  else timer = setTimeout(() => (open.value = true), props.delay)
}

function hide(immediate = false) {
  clearTimeout(timer)
  if (immediate) open.value = false
  // The grace period lets the pointer travel from the trigger onto the tooltip.
  else timer = setTimeout(() => (open.value = false), 100)
}

onBeforeUnmount(() => clearTimeout(timer))

provideTooltip({ open, show, hide, anchor: ref(null), contentId: useId() })
</script>

<template>
  <slot :open="open" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useFloating, type Align, type Side } from '../../lib/floating'
import { Portal } from '../../lib/primitive'
import { useTooltip } from './context'

defineOptions({ inheritAttrs: false })

const props = withDefaults(
  defineProps<{
    side?: Side
    align?: Align
    /** Gap between trigger and tooltip, in px. */
    sideOffset?: number
  }>(),
  { side: 'top', align: 'center', sideOffset: 6 },
)

const tooltip = useTooltip()
const content = ref<HTMLElement | null>(null)

useFloating(tooltip.anchor, content, tooltip.open, props)
</script>

<template>
  <Portal>
    <Transition name="er-pop">
      <div
        v-if="tooltip.open.value"
        :id="tooltip.contentId"
        ref="content"
        v-bind="$attrs"
        role="tooltip"
        class="er-floating er-tooltip"
        @pointerenter="tooltip.show(true)"
        @pointerleave="tooltip.hide()"
      >
        <slot />
      </div>
    </Transition>
  </Portal>
</template>

<style>
@layer components {
  .er-tooltip {
    max-width: min(20rem, calc(100vw - 1rem));
    padding: 0.375rem 0.75rem;
    border-radius: var(--er-radius-md);
    background: var(--er-primary);
    color: var(--er-primary-foreground);
    font-size: 0.75rem;
    line-height: 1.35;
    text-wrap: balance;
  }
}
</style>

<script setup lang="ts">
import type { Component } from 'vue'
import { Primitive, toElement } from '../../lib/primitive'
import { useTooltip } from './context'

withDefaults(
  defineProps<{
    as?: string | Component
    /** Use the single child (e.g. a Button) as the trigger instead of rendering one. */
    asChild?: boolean
  }>(),
  { as: 'button' },
)

const tooltip = useTooltip()

function setAnchor(target: unknown) {
  tooltip.anchor.value = toElement(target)
}

function onPointerEnter(event: PointerEvent) {
  if (event.pointerType !== 'touch') tooltip.show()
}

function onFocus(event: FocusEvent) {
  // Only for keyboard focus — a click also focuses, and should not pop a tooltip.
  if ((event.target as HTMLElement).matches(':focus-visible')) tooltip.show(true)
}

function onKeydown(event: KeyboardEvent) {
  if (event.key === 'Escape') tooltip.hide(true)
}
</script>

<template>
  <Primitive
    :ref="setAnchor"
    :as="as"
    :as-child="asChild"
    :type="as === 'button' && !asChild ? 'button' : undefined"
    :aria-describedby="tooltip.open.value ? tooltip.contentId : undefined"
    :data-state="tooltip.open.value ? 'open' : 'closed'"
    @pointerenter="onPointerEnter"
    @pointerleave="tooltip.hide()"
    @pointerdown="tooltip.hide(true)"
    @focus="onFocus"
    @blur="tooltip.hide(true)"
    @keydown="onKeydown"
  >
    <slot />
  </Primitive>
</template>

import type { Ref } from 'vue'
import { createContext } from '../../lib/context'

export interface TooltipContext {
  open: Ref<boolean>
  /** Open after the delay, or straight away with `immediate`. */
  show: (immediate?: boolean) => void
  /** Close after a short grace period, or straight away with `immediate`. */
  hide: (immediate?: boolean) => void
  anchor: Ref<HTMLElement | null>
  contentId: string
}

export const [provideTooltip, useTooltip] = createContext<TooltipContext>('Tooltip')

/** Tooltip — a short hint shown on hover or keyboard focus. */
export { default as Tooltip } from './Tooltip.vue'
export { default as TooltipContent } from './TooltipContent.vue'
export { default as TooltipTrigger } from './TooltipTrigger.vue'