This is the llms.txt documentation for the "tooltips" directory of the Origin UI - Svelte project. # "tooltips" directory > A collection of production-ready, accessible UI components built with Svelte 5 and Tailwind CSS. These components are designed to be drop-in solutions for rapidly building modern web applications. This documentation covers 12 components, each following best practices for accessibility, performance, and type safety. ## Components ## tooltip-01 > A type-safe, accessible tooltip-01 component for building modern UIs. This component is part of the tooltips collection. ### Core Information - **Component ID**: `tooltip-01` - **Location**: `/src/lib/components/tooltips/tooltip-01.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte {#snippet child({ props })} {/snippet} This is a simple tooltip ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tooltips/tooltip-01.svelte) ## tooltip-02 > A type-safe, accessible tooltip-02 component for building modern UIs. This component is part of the tooltips collection. ### Core Information - **Component ID**: `tooltip-02` - **Location**: `/src/lib/components/tooltips/tooltip-02.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte {#snippet child({ props })} {/snippet} This tooltip will be always dark ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tooltips/tooltip-02.svelte) ## tooltip-03 > A type-safe, accessible tooltip-03 component for building modern UIs. This component is part of the tooltips collection. ### Core Information - **Component ID**: `tooltip-03` - **Location**: `/src/lib/components/tooltips/tooltip-03.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte {#snippet child({ props })} {/snippet} This tooltip has an arrow ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tooltips/tooltip-03.svelte) ## tooltip-04 > A type-safe, accessible tooltip-04 component for building modern UIs. This component is part of the tooltips collection. ### Core Information - **Component ID**: `tooltip-04` - **Location**: `/src/lib/components/tooltips/tooltip-04.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte {#snippet child({ props })} {/snippet}

Tooltip with title

Tooltips are made to be highly customizable, with features like dynamic placement, rich content, and a robust API. You can even use them as a full-featured dropdown menu by setting the trigger prop to click.

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tooltips/tooltip-04.svelte) ## tooltip-05 > A type-safe, accessible tooltip-05 component for building modern UIs. This component is part of the tooltips collection. ### Core Information - **Component ID**: `tooltip-05` - **Location**: `/src/lib/components/tooltips/tooltip-05.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`lucide-svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte {#snippet child({ props })} {/snippet}

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tooltips/tooltip-05.svelte) ## tooltip-06 > A type-safe, accessible tooltip-06 component for building modern UIs. This component is part of the tooltips collection. ### Core Information - **Component ID**: `tooltip-06` - **Location**: `/src/lib/components/tooltips/tooltip-06.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`enhanced-image`](https://www.npmjs.com/package/@sveltejs/enhanced-img) (dev dependency) Full component implementation: ```svelte {#snippet child({ props })} {/snippet}

Tooltip with title and icon

Tooltips are made to be highly customizable, with features like dynamic placement, rich content, and a robust API.

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tooltips/tooltip-06.svelte) ## tooltip-07 > A type-safe, accessible tooltip-07 component for building modern UIs. This component is part of the tooltips collection. ### Core Information - **Component ID**: `tooltip-07` - **Location**: `/src/lib/components/tooltips/tooltip-07.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`lucide-svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte

{#snippet child({ props })} {/snippet} Pan top ⌘T {#snippet child({ props })} {/snippet} Pan left ⌘L {#snippet child({ props })} {/snippet} Pan right ⌘R {#snippet child({ props })} {/snippet} Pan bottom ⌘B

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tooltips/tooltip-07.svelte) ## tooltip-08 > A type-safe, accessible tooltip-08 component for building modern UIs. This component is part of the tooltips collection. ### Core Information - **Component ID**: `tooltip-08` - **Location**: `/src/lib/components/tooltips/tooltip-08.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte {#snippet child({ props })} {/snippet}

Status Completed
Code Coverage 94.3%
Last Deploy Today at 15:42
Performance Score 98/100

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tooltips/tooltip-08.svelte) ## tooltip-09 > A type-safe, accessible tooltip-09 component for building modern UIs. This component is part of the tooltips collection. ### Core Information - **Component ID**: `tooltip-09` - **Location**: `/src/lib/components/tooltips/tooltip-09.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte {#snippet child({ props })} {/snippet}

Tuesday, Aug 13

Sales $40

Revenue $74

Costs $410

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tooltips/tooltip-09.svelte) ## tooltip-10 > A type-safe, accessible tooltip-10 component for building modern UIs. This component is part of the tooltips collection. ### Core Information - **Component ID**: `tooltip-10` - **Location**: `/src/lib/components/tooltips/tooltip-10.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`enhanced-image`](https://www.npmjs.com/package/@sveltejs/enhanced-img) (dev dependency) Full component implementation: ```svelte {#snippet child({ props })} {/snippet}

@Origin_UI

Beautiful UI components built with Tailwind CSS and Svelte

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tooltips/tooltip-10.svelte) ## tooltip-11 > A type-safe, accessible tooltip-11 component for building modern UIs. This component is part of the tooltips collection. ### Core Information - **Component ID**: `tooltip-11` - **Location**: `/src/lib/components/tooltips/tooltip-11.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`enhanced-image`](https://www.npmjs.com/package/@sveltejs/enhanced-img) (dev dependency) Full component implementation: ```svelte

{#snippet child({ props })} Keith Kennedy {/snippet}

@k.kennedy

Keith Kennedy

@k.kennedy

Designer at @Origin UI. Crafting web experiences with Tailwind CSS.

3 mutual friends

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tooltips/tooltip-11.svelte) ## tooltip-12 > A type-safe, accessible tooltip-12 component for building modern UIs. This component is part of the tooltips collection. ### Core Information - **Component ID**: `tooltip-12` - **Location**: `/src/lib/components/tooltips/tooltip-12.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`enhanced-image`](https://www.npmjs.com/package/@sveltejs/enhanced-img) (dev dependency) Full component implementation: ```svelte {#snippet child({ props })} {/snippet}

Building a Design System with Svelte and Tailwind CSS

Learn how to build a comprehensive design system using Tailwind CSS, including component architecture, and theme customization.

8 min read · Updated 2 days ago

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tooltips/tooltip-12.svelte)