Barefoot.js
Barefoot.js
View on GitHub
Introduction
Accordion
Badge
Button
Card
Checkbox
Counter
Dialog
Dropdown
Input
Select
Switch
Tabs
Toast
Tooltip
Controlled Input
Field Arrays
Submit
Validation

Tooltip

A popup that displays contextual information on hover or focus.

Hover me
1<TooltipContent open={open()}>...</TooltipContent>

#Installation

1bunx barefoot add tooltip

#Usage

1import { createSignal } from '@barefootjs/dom'2import { TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'34export default function Page() {5  const [open, setOpen] = createSignal(false)67  return (8    <div class="relative inline-block">9      <TooltipTrigger10        onMouseEnter={() => setOpen(true)}11        onMouseLeave={() => setOpen(false)}12        ariaDescribedby="my-tooltip"13      >14        <span>Hover me</span>15      </TooltipTrigger>16      <TooltipContent open={open()} id="my-tooltip">17        Tooltip content18      </TooltipContent>19    </div>20  )21}

#Features

  • Hover trigger - Shows tooltip on mouse enter, hides on mouse leave
  • Focus trigger - Shows tooltip on focus for keyboard accessibility
  • Placement options - Top, right, bottom, or left positioning
  • Arrow indicator - Visual arrow pointing to the trigger
  • Accessibility - role="tooltip", aria-describedby for screen readers

#Examples

#Basic Tooltip

Hover me
1const [open, setOpen] = createSignal(false)23<div class="relative inline-block">4  <TooltipTrigger5    onMouseEnter={() => setOpen(true)}6    onMouseLeave={() => setOpen(false)}7    ariaDescribedby="tooltip-basic"8  >9    <span class="underline decoration-dotted cursor-help">10      Hover me11    </span>12  </TooltipTrigger>13  <TooltipContent open={open()} id="tooltip-basic">14    This is a tooltip15  </TooltipContent>16</div>

#Button with Focus Support

1const [open, setOpen] = createSignal(false)23<div class="relative inline-block">4  <TooltipTrigger5    onMouseEnter={() => setOpen(true)}6    onMouseLeave={() => setOpen(false)}7    onFocus={() => setOpen(true)}8    onBlur={() => setOpen(false)}9    ariaDescribedby="tooltip-button"10  >11    <button type="button" class="...">12      Hover or Focus13    </button>14  </TooltipTrigger>15  <TooltipContent open={open()} id="tooltip-button">16    Keyboard accessible tooltip17  </TooltipContent>18</div>

#Placement Options

1import { TooltipContent } from '@/components/ui/tooltip'23// Top placement (default)4<TooltipContent open={open()}>...</TooltipContent>56// Right placement7<TooltipContent placement="right" open={open()}>...</TooltipContent>89// Bottom placement10<TooltipContent placement="bottom" open={open()}>...</TooltipContent>1112// Left placement13<TooltipContent placement="left" open={open()}>...</TooltipContent>

#Delay Options

Hover me (700ms delay)Hover me (no delay)
1// With 700ms delay (default)2<TooltipTrigger3  onMouseEnter={() => setOpen(true)}4  onMouseLeave={() => setOpen(false)}5  delayDuration={700}6>7  ...8</TooltipTrigger>910// No delay (immediate)11<TooltipTrigger12  onMouseEnter={() => setOpen(true)}13  onMouseLeave={() => setOpen(false)}14  delayDuration={0}15>16  ...17</TooltipTrigger>

#Accessibility

  • Keyboard Support - Tooltip shows on focus for keyboard users
  • ARIA - role="tooltip" on content, aria-describedby on trigger links to tooltip
  • Screen Readers - Tooltip content is announced when trigger receives focus
  • Delay - Configurable delay prevents tooltips from appearing during quick mouse movements
  • Visual Indicator - Arrow points to the trigger element for clear association

#API Reference

TooltipTrigger

PropTypeDefaultDescription
onMouseEnter() => void-Event handler called when mouse enters the trigger.
onMouseLeave() => void-Event handler called when mouse leaves the trigger.
onFocus() => void-Event handler called when the trigger receives focus.
onBlur() => void-Event handler called when the trigger loses focus.
ariaDescribedbystring-ID of the tooltip element for accessibility.
delayDurationnumber700Delay in ms before showing tooltip on hover.
closeDelaynumber0Delay in ms before hiding tooltip after mouse leave.

TooltipContent

The tooltip popup. Use the placement prop to control positioning.

PropTypeDefaultDescription
placement'top' | 'right' | 'bottom' | 'left''top'Position of the tooltip relative to the trigger.
openbooleanfalseWhether the tooltip is visible.
idstring-ID for aria-describedby reference.