Tooltip

#Basic usage

tooltip/basic.vue

<script setup lang="ts">
import { download } from "@bysages/icons";
import { Button, Icon, Tooltip } from "@bysages/vue";
</script>

<template>
  <Tooltip.Root>
    <Tooltip.Trigger as-child>
      <Button variant="outline" size="sm">
        <Icon :glyph="download" />
        Hover me
      </Button>
    </Tooltip.Trigger>
    <Tooltip.Positioner>
      <Tooltip.Content>Ink answers only when asked.</Tooltip.Content>
    </Tooltip.Positioner>
  </Tooltip.Root>
</template>

#Props

#ArrowTip

A styled part — no props of its own; it takes the anatomy's shared styling.

#Arrow

A styled part — no props of its own; it takes the anatomy's shared styling.

#Content

A styled part — no props of its own; it takes the anatomy's shared styling.

#Positioner

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`aria-label`	`string`		Custom label for the tooltip.
`closeDelay`	`number`	`500`	The close delay of the tooltip.
`closeOnClick`	`boolean`	`true`	Whether the tooltip should close on click
`closeOnEscape`	`boolean`	`true`	Whether to close the tooltip when the Escape key is pressed.
`closeOnPointerDown`	`boolean`	`true`	Whether to close the tooltip on pointerdown.
`closeOnScroll`	`boolean`	`true`	Whether the tooltip should close on scroll
`defaultOpen`	`boolean`		The initial open state of the tooltip when rendered. Use when you don't need to control the open state of the tooltip.
`defaultTriggerValue`	`string \| null`		The initial trigger value when rendered. Use when you don't need to control the trigger value.
`disabled`	`boolean`		Whether the tooltip is disabled
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ trigger: string; content: string; arrow: string; positioner: string; }>`		The ids of the elements in the tooltip. Useful for composition.
`interactive`	`boolean`	`false`	Whether the tooltip's content is interactive. In this mode, the tooltip will remain open when user hovers over the content. @see https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus
`open`	`boolean`		The controlled open state of the tooltip
`openDelay`	`number`	`1000`	The open delay of the tooltip.
`positioning`	`tooltip.PositioningOptions`		The user provided options used to position the popover content
`triggerValue`	`string \| null`		The value of the trigger that currently open the tooltip

#Trigger

Prop	Type	Default	Description
`value`	`string`		The value that identifies this specific trigger