Tooltip

A small overlay that provides contextual information on hover or focus.

<script lang="ts">
import { Tooltip, TooltipPopup, TooltipTrigger } from "coss-svelte";
</script>

<Tooltip>
	<TooltipTrigger>Hover me</TooltipTrigger>
	<TooltipPopup>Helpful hint</TooltipPopup>
</Tooltip>

Installation

Install the component package, shared coss-svelte theme, and Bits UI peer.

npm install coss-svelte @coss-svelte/theme bits-ui

Usage

Import the Svelte component exports directly from the package.

import { Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger } from "coss-svelte";

Anatomy

Tooltip
TooltipPopup
TooltipProvider
TooltipTrigger

API Reference

Tooltip

A small overlay that provides contextual information on hover or focus.

Prop	Type	Default	Description
`label`	`string`	`""`	Accessible label or fallback visible label for the control.
`tip`	`string`	`"Tooltip"`	Fallback tooltip content.

children : Snippet<[]> | Snippet<[TooltipRootSnippetProps<unknown>]>

Inherits from Bits UI Tooltip.Root.

TooltipPopup

Renders the floating or modal surface for the parent component.

Prop	Type	Default	Description
`portalProps`	`{ disabled?: boolean; to?: PortalTarget }`	`{}`	Configures the exact Bits Portal target (`to`) or renders inline when `disabled`.

children : Snippet<[]>bind:ref : HTMLElement | null

Inherits from Bits UI Tooltip.Content.

TooltipProvider

Provides shared state and context to child components.

children : Snippet<[]>

Inherits from Bits UI Tooltip.Provider.

TooltipTrigger

Renders the control that opens, closes, or selects related content.

children : Snippet<[]>child : Snippet<[{ props: Record<string, unknown> }]>bind:ref : HTMLElement | null

Inherits from Bits UI Tooltip.Trigger.

Implementation Details

Status: Stable
Foundation: bits
Category: Overlays & Popups
Particles: 4