Tooltip

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

Tooltip

Nuxt UI

Git

Usage

Place a Button or any other component in the Tooltip's default slot.

WARNING

Ensure your application is enclosed with the App component, which incorporates the TooltipProvider from Reka UI.

TIP

You can review the tooltip property of the App component to learn how to set up the Tooltip globally.

Text

Apply the text prop to specify what the Tooltip will display.

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

export interface ExampleProps {
  text?: string
}

const props = withDefaults(defineProps<ExampleProps>(), {
  text: 'Opens the deal creation form in the slider'
})
</script>

<template>
  <B24Tooltip
    :text="props.text"
  >
    <B24Button label="New deal" color="success" :icon="DealPlusIcon" />
  </B24Tooltip>
</template>

Kbds

Apply the kbds prop to render Kbd components inside the Tooltip.

WARNING

Kbds are displayed starting from breakpoint lg

Details

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

<template>
  <B24Tooltip
    text="Opens the deal creation form in the slider"
    :kbds="['meta', 'D']"
  >
    <B24Button label="New deal" color="success" :icon="DealPlusIcon" />
  </B24Tooltip>
</template>

TIP

You can utilize special keys such as meta, which appears as ⌘ on macOS and Ctrl on other systems.

Delay

Apply the delay-duration prop to modify the delay before the Tooltip becomes visible. You can make it appear immediately by setting it to 0.

Details

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

export interface ExampleProps {
  delayDuration?: number
}

const props = withDefaults(defineProps<ExampleProps>(), {
  delayDuration: 0
})
</script>

<template>
  <B24Tooltip
    text="Opens the deal creation form in the slider"
    :delay-duration="props.delayDuration"
  >
    <B24Button label="New deal" color="success" :icon="DealPlusIcon" />
  </B24Tooltip>
</template>

Content

Apply the content prop to dictate how the Tooltip content is displayed, including options like align or side.

Details

<script setup lang="ts">
import { computed } from 'vue'
import DealPlusIcon from '@bitrix24/b24icons-vue/crm/DealPlusIcon'

export interface ExampleProps {
  contentAlign?: 'start' | 'center' | 'end'
  contentSide?: 'top' | 'right' | 'bottom' | 'left'
  contentSideOffset?: number
}

const props = withDefaults(defineProps<ExampleProps>(), {
  contentAlign: 'start',
  contentSide: 'left',
  contentSideOffset: 8
})

const content = computed(() => {
  return {
    align: props.contentAlign,
    side: props.contentSide,
    sideOffset: props.contentSideOffset
  }
})
</script>

<template>
  <B24Tooltip
    text="Opens the deal creation form in the slider"
    :content="content"
  >
    <B24Button label="New deal" color="success" :icon="DealPlusIcon" />
  </B24Tooltip>
</template>

Arrow

Apply the arrow prop to add an arrow to the Tooltip.

Details

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

<template>
  <B24Tooltip
    text="Opens the deal creation form in the slider"
    arrow
  >
    <B24Button label="New deal" color="success" :icon="DealPlusIcon" />
  </B24Tooltip>
</template>

Disabled

Apply the disabled prop to turn off the Tooltip.

Details

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

export interface ExampleProps {
  isDisabled?: boolean
}

const props = withDefaults(defineProps<ExampleProps>(), {
  isDisabled: true
})
</script>

<template>
  <B24Tooltip
    text="Opens the deal creation form in the slider"
    :disabled="props.isDisabled"
  >
    <B24Button label="New deal" color="success" :icon="DealPlusIcon" />
  </B24Tooltip>
</template>

Examples

Control open state

You can manage the open state with the default-open prop or the v-model:open directive.

INFO

In this example, using defineShortcuts. Press O to toggle the Tooltip.

Details

<script setup lang="ts">
import { ref } from 'vue'
import DealPlusIcon from '@bitrix24/b24icons-vue/crm/DealPlusIcon'

const open = ref(false)

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

<template>
  <B24Tooltip
    v-model:open="open"
    text="Opens the deal creation form in the slider"
    :kbds="['O']"
  >
    <B24Button label="New deal" color="success" :icon="DealPlusIcon" />
  </B24Tooltip>
</template>

Hardcoded appearance change

Discover ways to alter the tooltip's appearance. Don't forget to verify its appearance in the dark theme.

Details

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

<template>
  <B24Tooltip
    :delay-duration="100"
    :content="{ side: 'right' }"
    :b24ui="{ content: 'bg-blue-400/70 dark:bg-red-400/70' }"
  >
    <template #content>
      <div class="text-pretty max-w-[200px]">
        <p class="mb-1.5 text-red-800 dark:text-red-950">
          Magna copiosae apeirian ius at. <a href="#" class="font-bold text-ai-500 underline hover:text-ai-800">An eos iusto solet</a>, id mel dico habemus. Sale liber et vel. Per in illud petentium iudicabit, integre sententiae pro no. Tation delenit percipitur at vix. Per in illud petentium iudicabit, integre sententiae pro no. An nam debet instructior, commodo mediocrem id cum.
        </p>
        <p class="text-orange-800 dark:text-blue-950">
          Elitr accommodare deterruisset eam te, vim munere pertinax consetetur at. Ceteros assentior omittantur cum ad. Ceteros assentior omittantur cum ad. Odio contentiones sed cu, usu commodo prompta prodesset id. Sea esse deserunt ei, no diam ubique euripidis has.
        </p>
      </div>
    </template>
    <B24Switch
      name="switch"
      label="Hover me"
      :default-value="true"
      :unchecked-icon="Cross30Icon"
      :checked-icon="CheckIcon"
    />
  </B24Tooltip>
</template>

Help Icon

You can use the @bitrix24/b24icons and the Tooltip.

Details

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

<template>
  <div class="flex flex-row flex-nowrap items-center justify-start gap-1.5">
    <B24Checkbox name="checkbox" label="Default value" :default-value="true" />
    <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."
    >
      <div class="cursor-help ring ring-transparent text-base-500 dark:text-base-800">
        <HelpIcon class="size-5" />
      </div>
    </B24Tooltip>
  </div>
</template>

API

Props

Prop	Default	Type
text		string The text content of the tooltip.
kbds		(string)[] | KbdProps[] The keyboard keys to display in the tooltip.
content	{ side: 'bottom', sideOffset: 8, collisionPadding: 8 }	Omit<TooltipContentProps, "as" | "asChild"> The content of the tooltip.
arrow	false	boolean | Omit<TooltipArrowProps, "as" | "asChild"> Display an arrow alongside the tooltip.
portal	true	boolean Render the tooltip in a portal.
b24ui		Partial<{ content: string; arrow: string; text: string; kbds: string; kbdsSize: string; kbdsDepth: string; }>
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.

Slots

Slot	Type
default	{ open: boolean; }
content	{}

Emits

Event	Type