Tooltip

Contextual hover/focus information displayed in a floating overlay.

Open in Storybook

Interactive Demo

Usage

<script setup>
import { Tooltip, Button } from '@yellowcard/b2b-design-system';
</script>

<template>
  <Tooltip content="Click to submit the form" placement="top">
    <Button label="Submit" />
  </Tooltip>
</template>

API Reference

Props

Prop	Type	Default	Description
content*	string	—	Tooltip text content
placement	'top' | 'bottom' | 'left' | 'right'	'top'	Tooltip position
title	string	—	Optional title in tooltip
arrow	boolean	true	Show arrow pointer
disabled	boolean	false	Disable tooltip
trigger	'hover' | 'click' | 'focus'	'hover'	Trigger interaction
delay	number	—	Show delay in ms

Slots

Slot	Bindings	Description
default	—	The trigger element that shows the tooltip