# All files / js/components/ui/tooltip TooltipContent.vue

0% Statements 0/7
100% Branches 0/0
0% Functions 0/2
0% Lines 0/7

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34

     <script setup lang="ts">
    import type { HTMLAttributes } from 'vue'
    import { cn } from '@/lib/utils'
    import { reactiveOmit } from '@vueuse/core'
    import { TooltipArrow, TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'

    defineOptions({
      inheritAttrs: false,
    })

    const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
      sideOffset: 4,
    })

    const emits = defineEmits<TooltipContentEmits>()

    const delegatedProps = reactiveOmit(props, 'class')
    const forwarded = useForwardPropsEmits(delegatedProps, emits)
    </script>

    <template>
      <TooltipPortal>
        <TooltipContent
          data-slot="tooltip-content"
          v-bind="{ ...forwarded, ...$attrs }"
          :class="cn('bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance', props.class)"
        >
          <slot />

          <TooltipArrow class="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
        </TooltipContent>
      </TooltipPortal>
    </template>