v2.1.16
/
Use our Nuxt starter

Tooltip

A small window that shows details when you move your mouse over an item.
GitHub
Demo
Nuxt UI
TooltipTooltip

Usage

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

<template>
  <B24Tooltip text="Open on GitHub">
    <B24Button label="Open" />
  </B24Tooltip>
</template>
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.

<template>
  <B24Tooltip text="Open on GitHub">
    <B24Button label="Open" />
  </B24Tooltip>
</template>

Kbds

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

<template>
  <B24Tooltip
    text="Open on GitHub"
    :kbds="{
      '0': 'meta',
      '1': 'G'
    }"
  >
    <B24Button label="Open" />
  </B24Tooltip>
</template>
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.

<template>
  <B24Tooltip :delay-duration="0" text="Open on GitHub">
    <B24Button label="Open" />
  </B24Tooltip>
</template>
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.

<template>
  <B24Tooltip
    :content="{
      align: 'center',
      side: 'bottom',
      sideOffset: 8
    }"
    text="Open on GitHub"
  >
    <B24Button label="Open" />
  </B24Tooltip>
</template>

Arrow

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

<template>
  <B24Tooltip text="Open on GitHub">
    <B24Button label="Open" />
  </B24Tooltip>
</template>

Disabled

Use the disabled prop to disable the Tooltip.

<template>
  <B24Tooltip disabled text="Open on GitHub">
    <B24Button label="Open" />
  </B24Tooltip>
</template>

Examples

Control open state

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

<script setup lang="ts">
const open = ref(false)

defineShortcuts({
  o: () => open.value = !open.value
})
</script>

<template>
  <B24Tooltip v-model:open="open" text="Open on GitHub">
    <B24Button label="Open" />
  </B24Tooltip>
</template>
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 
<script setup lang="ts">
const open = ref(false)
const anchor = ref({ x: 0, y: 0 })

const reference = computed(() => ({
  getBoundingClientRect: () =>
    ({
      width: 0,
      height: 0,
      left: anchor.value.x,
      right: anchor.value.x,
      top: anchor.value.y,
      bottom: anchor.value.y,
      ...anchor.value
    } as DOMRect)
}))
</script>

<template>
  <B24Tooltip
    :open="open"
    :reference="reference"
    :content="{ side: 'top', sideOffset: 16, updatePositionStrategy: 'always' }"
  >
    <div
      class="flex items-center justify-center rounded-md border border-dashed border-(--ui-color-accent-main-primary-alt) text-sm aspect-video w-72"
      @pointerenter="open = true"
      @pointerleave="open = false"
      @pointermove="(ev) => {
        anchor.x = ev.clientX
        anchor.y = ev.clientY
      }"
    >
      Hover me
    </div>

    <template #content>
      {{ anchor.x.toFixed(0) }} - {{ anchor.y.toFixed(0) }}
    </template>
  </B24Tooltip>
</template>

Help Icon

You can use the Icon and the Tooltip.

<script setup lang="ts">
import HelpIcon from '@bitrix24/b24icons-vue/main/HelpIcon'
</script>

<template>
  <B24Tooltip
    :delay-duration="100"
    :content="{ side: 'right' }"
    text="When the performer completes the task, it will come to you for review. You can accept the work (and then the task will be closed) or return the task for revision."
  >
    <HelpIcon class="size-5 cursor-help" />
  </B24Tooltip>
</template>

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.

arrowtrueboolean | TooltipArrowProps

Display an arrow alongside the tooltip.

portaltrue 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.

defaultOpenboolean

The open state of the tooltip when it is initially rendered. Use when you do not need to control its open state.

openboolean

The controlled open state of the tooltip.

delayDuration700 number

Override the duration given to the Provider to customise the open delay for a specific tooltip.

disableHoverableContentboolean

Prevents Tooltip.Content from remaining open when hovering. Disabling this has accessibility consequences. Inherits from Tooltip.Provider.

disableClosingTriggerfalseboolean

When true, clicking on trigger will not close the content.

disabledfalseboolean

When true, disable tooltip

ignoreNonKeyboardFocusfalseboolean

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(--ui-border-radius-xl)-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(--ui-border-radius-xl)-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.

Releases
 Published under MIT License.

Copyright © 2024-present Bitrix24