Tooltip

A small window that shows details when you move your mouse over an item.

Usage

Use a Button or any other component in the default slot of the Tooltip.

{
  "wait": "Loading client-side content..."
}

Make sure to wrap your app with the App component which uses the TooltipProvider component from Reka UI.

You can check the App component tooltip prop to see how to configure the Tooltip globally.

Text

Use the text prop to set the content of the Tooltip.

text

{
  "wait": "Loading client-side content..."
}

Kbds

Use the kbds prop to render Kbd components in the Tooltip.

{
  "wait": "Loading client-side content..."
}

You can use special keys like meta that displays as ⌘ on macOS and Ctrl on other platforms.

Delay

Use the delay-duration prop to change the delay before the Tooltip appears. For example, you can make it appear instantly by setting it to 0.

delayDuration

{
  "wait": "Loading client-side content..."
}

This can be configured globally through the tooltip.delayDuration option in the App component.

Content

Use the content prop to control how the Tooltip content is rendered, like its align or side for example.

content.align

content.side

content.sideOffset

{
  "wait": "Loading client-side content..."
}

Arrow

Use the arrow prop to display an arrow on the Tooltip.

arrow

{
  "wait": "Loading client-side content..."
}

Disabled

Use the disabled prop to disable the Tooltip.

disabled

{
  "wait": "Loading client-side content..."
}

Examples

Control open state

You can control the open state by using the default-open prop or the v-model:open directive.

{
  "wait": "Loading client-side content..."
}

In this example, leveraging defineShortcuts, you can toggle the Tooltip by pressing O.

With following cursor

You can make the Tooltip follow the cursor when hovering over an element using the reference prop:

Hover me

{
  "wait": "Loading client-side content..."
}

Help Icon

You can use the Icon and the Tooltip.

{
  "wait": "Loading client-side content..."
}

API

Props

Prop	Default	Type
`text`		`string` The text content of the tooltip.
`kbds`		`(string \| undefined)[] \| KbdProps[]` The keyboard keys to display in the tooltip.
`content`	`{ side: 'bottom', sideOffset: 8, collisionPadding: 8 }`	`TooltipContentProps & Partial<EmitsToProps<TooltipContentImplEmits>>` The content of the tooltip.
`arrow`	`true`	`boolean \| TooltipArrowProps` Display an arrow alongside the tooltip.
`portal`	`true`	`string \| false \| true \| HTMLElement` Render the tooltip in a portal.
`reference`		`Element \| VirtualElement` The reference (or anchor) element that is being referred to for positioning. If not provided will use the current component as anchor.
`defaultOpen`		`boolean` The open state of the tooltip when it is initially rendered. Use when you do not need to control its open state.
`open`		`boolean` The controlled open state of the tooltip.
`delayDuration`	`700`	`number` Override the duration given to the `Provider` to customise the open delay for a specific tooltip.
`disableHoverableContent`		`boolean` Prevents Tooltip.Content from remaining open when hovering. Disabling this has accessibility consequences. Inherits from Tooltip.Provider.
`disableClosingTrigger`	`false`	`boolean` When `true`, clicking on trigger will not close the content.
`disabled`	`false`	`boolean` When `true`, disable tooltip
`ignoreNonKeyboardFocus`	`false`	`boolean` Prevent the tooltip from opening if the focus did not come from the keyboard by matching against the `:focus-visible` selector. This is useful if you want to avoid opening it when switching browser tabs or closing a dialog.
`b24ui`		`{ content?: ClassNameValue; arrow?: ClassNameValue; text?: ClassNameValue; kbds?: ClassNameValue; kbdsSize?: ClassNameValue; kbdsAccent?: ClassNameValue; }`

Slots

Slot	Type
`default`	`{ open: boolean; }`
`content`	`{ b24ui: object; }`

Emits

Event	Type
`update:open`	`[value: boolean]`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    tooltip: {
      slots: {
        content: 'dark flex flex-row items-center justify-between gap-[5px] will-change-[opacity] min-h-[37px] shadow-xl/20 select-none motion-safe:data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in] p-[10px] text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset) font-[family-name:var(--ui-font-family-primary)] bg-(--ui-color-bg-content-primary)/80 text-(--ui-color-design-plain-na-focused-content) rounded-[calc(var(--popup-window-border-radius)-2px)] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto',
        arrow: 'fill-(--ui-color-bg-content-primary)/80',
        text: 'text-pretty max-w-[200px] min-w-[100px]',
        kbds: "hidden lg:inline-flex items-center shrink-0 gap-0.5 not-first-of-type:before:content-[''] not-first-of-type:before:me-0.5",
        kbdsSize: 'sm',
        kbdsAccent: 'default'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        tooltip: {
          slots: {
            content: 'dark flex flex-row items-center justify-between gap-[5px] will-change-[opacity] min-h-[37px] shadow-xl/20 select-none motion-safe:data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in] p-[10px] text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset) font-[family-name:var(--ui-font-family-primary)] bg-(--ui-color-bg-content-primary)/80 text-(--ui-color-design-plain-na-focused-content) rounded-[calc(var(--popup-window-border-radius)-2px)] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto',
            arrow: 'fill-(--ui-color-bg-content-primary)/80',
            text: 'text-pretty max-w-[200px] min-w-[100px]',
            kbds: "hidden lg:inline-flex items-center shrink-0 gap-0.5 not-first-of-type:before:content-[''] not-first-of-type:before:me-0.5",
            kbdsSize: 'sm',
            kbdsAccent: 'default'
          }
        }
      }
    })
  ]
})

Toast

A short message to offer information or feedback to the user.

PageCard

A pre-styled card component featuring a title, description, and optional link.