UI Elements

Tooltip

A small popup that displays helpful information when hovering over an element.

Hover HERE

Anatomy

The class attribute values represent part names, and conditional indicates elements that are rendered conditionally. Other attributes represent their corresponding props.

Svelte
<div class="whole" bind:this={element} conditional>
  {#if children}
    {children}
  {:else}
    {text} <!-- `text` is an argument of the tooltip/tooltipAction function -->
  {/if}
</div>

Props

Type

(value) indicates the default value for the prop.

TypeScript
interface TooltipProps {
  children?: Snippet<[string, string, boolean]>; // Snippet<[text,variant,isFlipped]>
  name?: string;
  position?: Position; // ("top")
  align?: Align; // ("center")
  offset?: Vector; // ({ x: 0, y: 0 })
  element?: HTMLDivElement; // bindable
  styling?: SVSClass;
  variant?: string; // bindable (VARIANT.NEUTRAL)
}

Additional Props

  • name - Identifier when multiple tooltip components are present
  • position - Display position relative to the target element
  • align - Tooltip alignment relative to the target element
  • offset - Offset from the default position

Styling

To learn more, see Styling.

Variant Management

No automatic switching.

Default Class Name

svs-tooltip

Exports

Types

TypeScript
type Vector = { x: number, y: number };
type Position = "top" | "right" | "bottom" | "left";
type Align = "start" | "center" | "end";
type TooltipReqdProps = never;
type TooltipBindProps = "variant" | "element";

Others

TypeScript
// `text` - Text for aria-label
// `delay` - Time in milliseconds before tooltip appears (default: 1000)
// `cursor` - Whether tooltip follows cursor movement
// `name` - Identifier of the tooltip component
function tooltip(node: HTMLElement, params: { text: string, delay?: number, cursor?: boolean, name?: string }): ActionReturn
function tooltipAction(text: string, delay?: number, cursor?: boolean, name?: string): Action

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

Hover HERE

With Interactive Variant

Preset for Demo
Enter variant as you like