UI Controls

Tooltip

Hover tooltip for providing additional context on elements.

Props

Prop	Type	Default	Description
`text`	`string`	`—`	Tooltip text content
`position`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`	Tooltip position

Import

import { Tooltip } from '@the-vcsi/scrolly-kit';

Usage

<script>
  import { Tooltip } from '@the-vcsi/scrolly-kit';
</script>

<Tooltip text="More information here">
  <button>Hover me</button>
</Tooltip>

Full Source

💡 Components rely on --vcsi-* tokens from tokens.css. You'd need to either need to @import '@the-vcsi/scrolly-kit/styles/tokens.css'; to access the CSS variables or define equivalent variables in your app.css. We also are using types here to provide hints when users are using the components in their project.

<script>
  let {
    visible = false,
    x = 0,
    y = 0,
    content = '',
    offset = { x: 10, y: -30 }
  } = $props();
</script>

{#if visible}
  <div
    class="tooltip"
    style="left: {x + offset.x}px; top: {y + offset.y}px;"
  >
    {content}
  </div>
{/if}

<style>
  .tooltip {
    position: fixed;
    background: var(--vcsi-bg);
    color: var(--vcsi-fg);
    border: 1px solid var(--vcsi-border);
    padding: 0.75rem 1rem;
    border-radius: var(--vcsi-radius-sm);
    font-size: var(--vcsi-font-size-xs);
    font-family: var(--vcsi-font-sans);
    white-space: pre-line;
    line-height: 1.4;
    pointer-events: none;
    z-index: 1000;
    max-width: 300px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: opacity var(--vcsi-transition-fast);
  }

  :global(.dark) .tooltip {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
</style>