Tooltip

Overview

The Tooltip component is a core building block of the Byteion design system, providing a robust, accessibility-compliant interface for its specific UI capabilities.

Why this exists

Tooltips provide supplementary information on hover or focus without cluttering the interface. They are the"what is this?" layer of UI.

Mental model

When to use

When not to use

Basic example

The following example demonstrates standard usage, fully compliant with Byteion's token-first approach.

import { Button, Tooltip } from '@byteion/react/client';

export default function TooltipDemo() {
  return (
    <div className="flex flex-wrap items-center gap-6 p-12">
      <Tooltip content="Top tooltip"    side="top"   ><Button variant="outline">Top</Button></Tooltip>
      <Tooltip content="Right tooltip"  side="right" ><Button variant="outline">Right</Button></Tooltip>
      <Tooltip content="Bottom tooltip" side="bottom"><Button variant="outline">Bottom</Button></Tooltip>
      <Tooltip content="Left tooltip"   side="left"  ><Button variant="outline">Left</Button></Tooltip>
      <Tooltip content="Delete this row permanently" tone="danger">
        <Button aria-label="Delete" iconOnly variant="soft" tone="danger">
          <i className="ti ti-trash" />
        </Button>
      </Tooltip>
    </div>
  );
}

<script setup lang="ts">
import { Button, Tooltip } from '@byteion/vue';
</script>

<template>
  <div class="flex flex-wrap items-center gap-6 p-12">
    <Tooltip content="Top tooltip"    side="top"   ><Button variant="outline">Top</Button></Tooltip>
    <Tooltip content="Right tooltip"  side="right" ><Button variant="outline">Right</Button></Tooltip>
    <Tooltip content="Bottom tooltip" side="bottom"><Button variant="outline">Bottom</Button></Tooltip>
    <Tooltip content="Left tooltip"   side="left"  ><Button variant="outline">Left</Button></Tooltip>
    <Tooltip content="Delete this row permanently" tone="danger">
      <Button aria-label="Delete" icon-only variant="soft" tone="danger">
        <i class="ti ti-trash" />
      </Button>
    </Tooltip>
  </div>
</template>

States

This component reacts seamlessly to the following interaction and data states:

• hidden — Not rendered in the DOM.
• visible — Rendered and interactive.
• default — Resting appearance before interaction.
• hover — Pointer is over the element — visual feedback via color or shadow.
• focus — Keyboard or tab focus — shows ring indicator for accessibility.
• active — Currently selected or in use.
• disabled — Non-interactive — grayed out, cursor not-allowed.
• open — Component is expanded or visible.
• closed — Component is collapsed or hidden.

Anatomy

Usage guidelines

• Keep text under 60 characters.
• Show after 500ms delay (not instant).
• Never put interactive elements inside a tooltip.

Do and Don't

Accessibility

Tooltip uses role="tooltip" with aria-describedby on the trigger. Also appears on focus, not just hover.

Customization

Background and text color follow popover tokens. Z-index uses --z-tooltip.

import { cva, cn, type VariantProps } from '@byteion/react';

const myTooltip = cva('base classes…', {
 variants: {
  accent: { soft:'border-primary-200', loud:'border-primary-500' },
 },
 defaultVariants: { accent:'soft' },
});

type Props = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof myTooltip>;

<script setup lang="ts">
import { computed, useAttrs } from 'vue';
import { cva, type VariantProps } from '@byteion/vue';

interface Props { accent?:'soft' |'loud' }
const props = withDefaults(defineProps<Props>(), { accent:'soft' });
const attrs = useAttrs();

const myTooltip = cva('base classes…', {
  variants: { accent: { soft:'border-primary-200', loud:'border-primary-500' } },
});

const cls = computed(() => myTooltip({ accent: props.accent, class: attrs.class as string | undefined }));
</script>

Runtime events

Byteion keeps framework APIs idiomatic: HTML uses DOM custom events, React uses callback props, and Vue uses emitted events / v-model updates.

Remote / AJAX

API Reference

Requires data-bi-component="tooltip" with data-bi-tooltip="content".

export interface TooltipProps {
  content: ReactNode;
  /** The triggering element (must accept ref + aria props). */
  children: ReactElement<any>;
  side?: 'top' | 'right' | 'bottom' | 'left';
  /** Delay before showing on hover, in ms. */
  delay?: number;
  /** Controlled open state. */
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  className?: string;
}

export interface TooltipProps {
  content?: string;
  side?: 'top' | 'right' | 'bottom' | 'left';
  /** Delay before showing on hover, in ms. */
  delay?: number;
  /** Controlled open state. */
  open?: boolean;
}

Developer tips

Common mistakes

Production usage tips

Premium examples

Advanced patterns available in Byteion Pro:

Related components

• Popover
• Dropdown
• Button