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>

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;
    

      /**
       * Size of tooltip arrow in pixels.
       *
       * @default 8
       */
      arrowSize?: MaybeGetter<number | undefined>;
    

      /**
       * 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>;
    

      /**
       * Options to be passed to Floating UI's `computePosition`
       *
       * @see https://floating-ui.com/docs/computePosition
       */
      computePositionOptions?: MaybeGetter<Partial<ComputePositionConfig> | undefined>;
    

      /**
       * 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()

  • computePositionOptions 

    {} | Partial<{ placement?: Elements; }) => Promisable<Platform | undefined; }>

  • closeOnPointerDown 

    boolean

  • openDelay 

    number

  • closeDelay 

    number

  • disableHoverableContent 

    boolean

  • arrowSize 

    number

  • forceVisible 

    boolean

  • isVisible 

    boolean
    State

  • open 

    boolean

  • trigger 

    {
      readonly onfocusout: () => Promise<void>
      readonly "data-melt-tooltip-trigger": ""
      readonly id: string
      readonly popovertarget: string
      readonly "aria-describedby": string
      readonly "data-open": "" | undefined
      readonly onclick: (
        e: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement },
      ) => void
      readonly onpointerdown: () => void
      readonly onpointerenter: (
        e: PointerEvent & { currentTarget: EventTarget & HTMLButtonElement },
      ) => void
      readonly onpointerleave: (
        e: PointerEvent & { currentTarget: EventTarget & HTMLButtonElement },
      ) => void
      readonly onfocus: () => void
      readonly onblur: () => void
    }

  • content 

    {
      readonly onfocusout: () => Promise<void>
      readonly "data-melt-tooltip-content": ""
      readonly id: string
      readonly popover: "manual"
      readonly role: "tooltip"
      readonly tabindex: -1
      readonly style: "overflow: visible;"
      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 "data-open": "" | undefined
      readonly style: `position: absolute; width: var(--arrow-size, ${number}px); height: var(--arrow-size, ${number}px);`
    }