Skip to content
Melt UI

Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Props

Features

  • 🎈 Fully customize Floating UI’s options
  • 🎨 Animation support

Usage

<script lang="ts">
  import { Tooltip } from "melt/builders";


  const tooltip = new Tooltip();
</script>


<button {...tooltip.trigger}>
  Hover me
</button>
<div {...tooltip.content}>
  <div {...tooltip.arrow}></div>
  <p>Content</p>
</div>

Customizing floating elements

Floating elements use Floating UI under the hood. To this end, we expose a floatingConfig option, which can be used to control the underlying computePosition function, its middlewares, and the resulting styling that is applied.

API Reference

Constructor Props

The props that are passed when calling 
new Tooltip()
    export type TooltipProps = {
      /**
       * If the Tooltip is open.
       *
       * When passing a getter, it will be used as source of truth,
       * meaning that the value only changes when the getter returns a new value.
       *
       * Otherwise, if passing a static value, it'll serve as the default value.
       *
       * @default false
       */
      open?: MaybeGetter<boolean | undefined>;
    

      /**
       * Called when the value is supposed to change.
       */
      onOpenChange?: (value: boolean) => void;
    

      /**
       * If `true`, tooltip will close if trigger is pressed.
       *
       * @default true
       */
      closeOnPointerDown?: MaybeGetter<boolean | undefined>;
    

      /**
       * Tooltip open delay in milliseconds.
       *
       * @default 1000
       */
      openDelay?: MaybeGetter<number | undefined>;
    

      /**
       * Tooltip close delay in milliseconds.
       *
       * @default 0
       */
      closeDelay?: MaybeGetter<number | undefined>;
    

      /**
       * Config to be passed to `useFloating`
       */
      floatingConfig?: UseFloatingArgs["config"];
    

      /**
       * If the popover visibility should be controlled by the user.
       *
       * @default false
       */
      forceVisible?: MaybeGetter<boolean | undefined>;
    

      /**
       * If `true`, leaving trigger will close the tooltip.
       *
       * @default false
       */
      disableHoverableContent?: MaybeGetter<boolean | undefined>;
    };

Properties

The properties returned from 
new Tooltip()

  • invokerRect 

    { x: number; y: number; width: number; height: number } | undefined

  • closeOnPointerDown 

    boolean

  • openDelay 

    number

  • closeDelay 

    number

  • disableHoverableContent 

    boolean

  • forceVisible 

    boolean

  • floatingConfig 

    UseFloatingConfig

  • isVisible 

    boolean
    State

  • graceAreaPolygon 

    { x: number; y: number }[]

  • open 

    boolean

  • trigger 

    {
      readonly onfocusout: () => Promise<void>
      readonly style: `--melt-invoker-width: ${string}; --melt-invoker-height: ${string}; --melt-invoker-x: ${string}; --melt-invoker-y: ${string}`
      readonly "data-melt-tooltip-trigger": ""
      readonly id: string
      readonly "aria-describedby": string
      readonly "data-open": "" | undefined
      readonly onpointerdown: () => void
      readonly onpointerenter: (
        e: PointerEvent & { currentTarget: EventTarget & HTMLElement },
      ) => void
      readonly onpointermove: () => void
      readonly onpointerleave: (
        e: PointerEvent & { currentTarget: EventTarget & HTMLElement },
      ) => void
      readonly onfocus: () => void
      readonly onblur: () => void
    }

  • content 

    {
      readonly style: string
      readonly onfocusout: () => Promise<void>
      readonly "data-melt-tooltip-content": ""
      readonly id: string
      readonly popover: "manual"
      readonly role: "tooltip"
      readonly tabindex: -1
      readonly inert: boolean
      readonly "data-open": "" | undefined
      readonly onpointerenter: () => void
      readonly onpointerleave: () => void
      readonly onpointerdown: () => void
    }

  • arrow 

    {
      readonly "data-melt-tooltip-arrow": ""
      readonly id: string
      readonly "data-arrow": ""
      readonly "aria-hidden": true
      readonly "data-open": "" | undefined
    }