@svelte-put/tooltip

<script lang="ts">
  import { computePosition } from '@floating-ui/dom';
  import { tooltip } from '@svelte-put/tooltip';
</script>

<button
  class="c-btn relative"
  use:tooltip={{
    content: 'An example tooltip',
    class: 'c-tooltip',
    compute: async ({ node, tooltip, content }) => {
      console.log(content);
      const { x, y } = await computePosition(node, tooltip, {
        placement: 'top',
      });
      tooltip.style.left = `${x}px`;
      tooltip.style.top = `${y}px`;
    },
  }}
>
  A button with tooltip
</button>

import { prepare } from '@svelte-put/tooltip';

export const myTooltip = prepare({ content: 'placeholder' });

// later in Svelte: <button use:myTooltip>...</button>

type TooltipParameter = TooltipContainer & {
  content: Content;
  compute?: TooltipCompute;
};
export function tooltip(node: HTMLElement, param: TooltipParameter);
export function prepare(param: TooltipParameter);

<script>
  import { prepare } from '@svelte-put/tooltip';

  const tooltipWithText = prepare({ content: 'Placeholder' });
</script>

<button use:tooltipWithText>A Button</button>

<script>
  import { prepare } from '@svelte-put/tooltip';

  import Tooltip from './Tooltip.svelte';

  const tooltipWithComponent = prepare({
    content: {
      component: TooltipComponent,
      // optionally with default props
      props: {
        content: 'Default content',
      },
    },
  });
</script>

<button use:tooltipWithComponent>A Button</button>

<script>
  // (optional) props injected by @svelte-put/tooltip at runtime
  export let visible = false;
  // your props
  export let content = 'Placeholder content';

  $: console.log('visibility state', visible);
</script>

<p class="m-0 p-0 text-gradient-brand text-lg">{content}</p>

type TooltipParameter = TooltipContainer & { /* truncated */ };

export type TooltipContainer = {
  /**
   * class name(s) to assign to tooltip container. Typically needed depending
   * on the positioning strategy
   */
  class?:
    | string
    | {
        default?: string;
        /** toggled on when tooltip is visible */
        visible?: string;
      };
  /**
   * HTML tag to render the tooltip container.
   * Defaults to `div`
   */
  tag?: string;
  /**
   * `HTMLElement` to render the tooltip container as child.
   * Defaults to `parent` of the node action is placed on
   */
  target?:
    | 'parent'
    | 'self'
    | 'body'
    | HTMLElement
    | ((node: HTMLElement, tooltip: HTMLElement) => void);
  /**
   * number of milliseconds to debounce show / hide state of the tooltip.
   * Defaults to `false` (show / hide immediately)
   */
  debounce?: false | number;
  /**
   * config for handling of `pointer-events` on the container element
   * Defaults to `true`
   *
   * @remarks
   * By default `pointer-events` is set to `none` by default, and `auto` when triggered.
   * Set to `false` to disable default behavior, or provide string(s) to
   * corresponding states
   */
  pointerEvents?:
    | boolean
    | {
        default?: string;
        /** value when tooltip is visible */
        visible?: string;
      };
  /**
   * the attribute to toggle in respond to tooltip's visibility state.
   * Defaults to `data-visible`.
   *
   * @remarks
   * Set to `false` to disable, or provide a string to use as attribute name.
   */
  visibleAttribute?: boolean | string;
  /**
   * config for accessibility
   * Defaults to `true`
   *
   * @remarks
   * By default:
   *   - (for container element) `role` is set to `tooltip`,
   *   - (for container element) `id` is taken from `aria-describedby` of
   *     the node action is placed on (if any),
   *     or auto-generated from a global counter,
   *   - (for node on which action is used) `aria-describedby` is set to the `id` of
   *     the container element (if not already exists)
   *
   * Set to `false` to disable default behavior, or provide string(s) to
   * the corresponding attributes
   */
  aria?:
    | boolean
    | {
        role?: string;
        id?: string;
      };
};

export type Compute = ({
  node: HTMLElement,
  tooltip: HTMLElement,
  content: string | SvelteComponent, // inferred from the content parameter
}) => void | (() => void) | Promise<void | (() => void)>