Tooltip
A popup that reveals information when hovering over an element.
Demo
Related Components
This requires the following components to be installed:
Related Composables
This requires the following composables to be installed:
Related Types
This requires the following types to be installed:
Related Theme
This requires the following theme to be installed:
Component
vue
<script lang="ts">
import type { KbdProps } from '@/ui/components/Kbd.vue'
import type { ComponentConfig } from '@/ui/utils/utils'
import type { TooltipArrowProps, TooltipContentEmits, TooltipContentProps, TooltipRootEmits, TooltipRootProps } from 'reka-ui'
import type { EmitsToProps } from 'vue'
import Kbd from '@/ui/components/Kbd.vue'
import { usePortal } from '@/ui/composables/usePortal'
import theme from '@/ui/theme/tooltip'
import { reactivePick } from '@vueuse/shared'
import defu from 'defu'
import { TooltipArrow, TooltipContent, TooltipPortal, TooltipRoot, TooltipTrigger, useForwardPropsEmits } from 'reka-ui'
import { tv } from 'tailwind-variants'
import { computed, toRef } from 'vue'
type Tooltip = ComponentConfig<typeof theme>
export interface TooltipProps extends TooltipRootProps {
text?: string
kbds?: KbdProps['value'][] | KbdProps[]
content?: Omit<TooltipContentProps, 'as' | 'asChild'> & Partial<EmitsToProps<TooltipContentEmits>>
arrow?: boolean | Omit<TooltipArrowProps, 'as' | 'asChild'>
portal?: boolean | string | HTMLElement
class?: any
ui?: Tooltip['slots']
}
export interface TooltipEmits extends TooltipRootEmits {}
export interface TooltipSlots {
default: (props: { open: boolean }) => any
content: (props?: object) => any
}
</script>
<script setup lang="ts">
const props = withDefaults(defineProps<TooltipProps>(), {
portal: true,
})
const emits = defineEmits<TooltipEmits>()
const slots = defineSlots<TooltipSlots>()
const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultOpen', 'open', 'delayDuration', 'disableHoverableContent', 'disableClosingTrigger', 'disabled', 'ignoreNonKeyboardFocus'), emits)
const portalProps = usePortal(toRef(() => props.portal))
const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8 }) as TooltipContentProps)
const arrowProps = toRef(() => props.arrow as TooltipArrowProps)
const ui = computed(() => tv(theme)({
side: contentProps.value.side,
}))
</script>
<template>
<TooltipRoot v-slot="{ open }" v-bind="rootProps">
<TooltipTrigger v-if="!!slots.default" v-bind="$attrs" as-child :class="props.class">
<slot :open="open" />
</TooltipTrigger>
<TooltipPortal v-bind="portalProps">
<TooltipContent v-bind="contentProps" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })">
<slot name="content">
<span v-if="text" :class="ui.text({ class: props.ui?.text })">{{ text }}</span>
<span v-if="kbds?.length" :class="ui.kbds({ class: props.ui?.kbds })">
<Kbd v-for="(kbd, index) in kbds" :key="index" :size="((props.ui?.kbdsSize || ui.kbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
</span>
</slot>
<TooltipArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
</TooltipContent>
</TooltipPortal>
</TooltipRoot>
</template>vue
<script lang="ts">
import type { KbdProps } from '@/UI/Components/Kbd.vue'
import type { ComponentConfig } from '@/UI/Utils/utils'
import type { TooltipArrowProps, TooltipContentEmits, TooltipContentProps, TooltipRootEmits, TooltipRootProps } from 'reka-ui'
import type { EmitsToProps } from 'vue'
import Kbd from '@/UI/Components/Kbd.vue'
import { usePortal } from '@/UI/Composables/usePortal'
import theme from '@/UI/Theme/tooltip'
import { reactivePick } from '@vueuse/shared'
import defu from 'defu'
import { TooltipArrow, TooltipContent, TooltipPortal, TooltipRoot, TooltipTrigger, useForwardPropsEmits } from 'reka-ui'
import { tv } from 'tailwind-variants'
import { computed, toRef } from 'vue'
type Tooltip = ComponentConfig<typeof theme>
export interface TooltipProps extends TooltipRootProps {
text?: string
kbds?: KbdProps['value'][] | KbdProps[]
content?: Omit<TooltipContentProps, 'as' | 'asChild'> & Partial<EmitsToProps<TooltipContentEmits>>
arrow?: boolean | Omit<TooltipArrowProps, 'as' | 'asChild'>
portal?: boolean | string | HTMLElement
class?: any
ui?: Tooltip['slots']
}
export interface TooltipEmits extends TooltipRootEmits {}
export interface TooltipSlots {
default: (props: { open: boolean }) => any
content: (props?: object) => any
}
</script>
<script setup lang="ts">
const props = withDefaults(defineProps<TooltipProps>(), {
portal: true,
})
const emits = defineEmits<TooltipEmits>()
const slots = defineSlots<TooltipSlots>()
const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultOpen', 'open', 'delayDuration', 'disableHoverableContent', 'disableClosingTrigger', 'disabled', 'ignoreNonKeyboardFocus'), emits)
const portalProps = usePortal(toRef(() => props.portal))
const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8 }) as TooltipContentProps)
const arrowProps = toRef(() => props.arrow as TooltipArrowProps)
const ui = computed(() => tv(theme)({
side: contentProps.value.side,
}))
</script>
<template>
<TooltipRoot v-slot="{ open }" v-bind="rootProps">
<TooltipTrigger v-if="!!slots.default" v-bind="$attrs" as-child :class="props.class">
<slot :open="open" />
</TooltipTrigger>
<TooltipPortal v-bind="portalProps">
<TooltipContent v-bind="contentProps" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })">
<slot name="content">
<span v-if="text" :class="ui.text({ class: props.ui?.text })">{{ text }}</span>
<span v-if="kbds?.length" :class="ui.kbds({ class: props.ui?.kbds })">
<Kbd v-for="(kbd, index) in kbds" :key="index" :size="((props.ui?.kbdsSize || ui.kbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
</span>
</slot>
<TooltipArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
</TooltipContent>
</TooltipPortal>
</TooltipRoot>
</template>Theme
ts
export default {
slots: {
content: '',
arrow: '',
text: '',
kbds: '',
kbdsSize: '',
},
}View Nuxt UI theme
ts
export default {
slots: {
content: 'flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto',
arrow: 'fill-default',
text: 'truncate',
kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:me-0.5`,
kbdsSize: 'sm',
},
}Test
To test this component, you can use the following test file:
ts
import type { RenderOptions } from '@testing-library/vue'
import Tooltip from '@/ui/components/Tooltip.vue'
import { render } from '@testing-library/vue'
import { TooltipProvider } from 'reka-ui'
import { describe, expect, it } from 'vitest'
import { defineComponent } from 'vue'
const TooltipWrapper = defineComponent({
components: {
TooltipProvider,
Tooltip,
},
inheritAttrs: false,
template: `<TooltipProvider>
<Tooltip v-bind="$attrs">
<template v-for="(_, name) in $slots" #[name]="slotData">
<slot :name="name" v-bind="slotData" />
</template>
</Tooltip>
</TooltipProvider>`,
})
describe('tooltip', () => {
globalThis.ResizeObserver = class ResizeObserver {
observe() {}
unobserve() {}
disconnect() {}
}
const props = { text: 'Tooltip', open: true, portal: false }
it.each<[string, RenderOptions<typeof Tooltip>]>([
// Props
['with text', { props }],
['with arrow', { props: { ...props, arrow: true } }],
['with kbds', { props: { ...props, kbds: ['meta', 'K'] } }],
['with class', { props: { ...props, class: 'text-sm' } }],
['with ui', { props: { ...props, ui: { content: 'text-sm' } } }],
// Slots
['with default slot', { props, slots: { default: () => 'Default slot' } }],
['with content slot', { props, slots: { content: () => 'Content slot' } }],
])('renders %s correctly', async (name, options) => {
const { html } = render(TooltipWrapper, options as any)
await new Promise(resolve => setTimeout(resolve, 0))
expect(html()).toMatchSnapshot()
})
})ts
import type { RenderOptions } from '@testing-library/vue'
import Tooltip from '@/UI/Components/Tooltip.vue'
import { render } from '@testing-library/vue'
import { TooltipProvider } from 'reka-ui'
import { describe, expect, it } from 'vitest'
import { defineComponent } from 'vue'
const TooltipWrapper = defineComponent({
components: {
TooltipProvider,
Tooltip,
},
inheritAttrs: false,
template: `<TooltipProvider>
<Tooltip v-bind="$attrs">
<template v-for="(_, name) in $slots" #[name]="slotData">
<slot :name="name" v-bind="slotData" />
</template>
</Tooltip>
</TooltipProvider>`,
})
describe('tooltip', () => {
globalThis.ResizeObserver = class ResizeObserver {
observe() {}
unobserve() {}
disconnect() {}
}
const props = { text: 'Tooltip', open: true, portal: false }
it.each<[string, RenderOptions<typeof Tooltip>]>([
// Props
['with text', { props }],
['with arrow', { props: { ...props, arrow: true } }],
['with kbds', { props: { ...props, kbds: ['meta', 'K'] } }],
['with class', { props: { ...props, class: 'text-sm' } }],
['with ui', { props: { ...props, ui: { content: 'text-sm' } } }],
// Slots
['with default slot', { props, slots: { default: () => 'Default slot' } }],
['with content slot', { props, slots: { content: () => 'Content slot' } }],
])('renders %s correctly', async (name, options) => {
const { html } = render(TooltipWrapper, options as any)
await new Promise(resolve => setTimeout(resolve, 0))
expect(html()).toMatchSnapshot()
})
})Contributors
barbapapazes