Tooltip

A tooltip is a component that shows brief information when users interact with an associated trigger element.

<Overlay.tooltip
  :let={api}
  placement="top"
  open_delay={200}
  close_delay={300}
  offset={16}
>
  <button
    class={[
      "grid place-items-center h-24 w-24 font-medium",
      "border-2 text-white border-white border-dashed rounded",
      "cursor-pointer focus:outline-none focus:ring-2 focus:ring-white"
    ]}
    {api.trigger_attrs}
  >
    hover me
  </button>
  <div
    class="absolute w-max px-2 py-1 bg-slate-700 text-sm text-white font-medium rounded"
    data-transition
    data-enter="transition duration-300"
    data-enter-from="opacity-0"
    data-enter-to="opacity-100"
    data-leave="transition duration-300"
    data-leave-from="opacity-100"
    data-leave-to="opacity-0"
    {api.container_attrs}
  >
    I'm a Tooltip
    <div class="absolute w-2 h-2 bg-slate-700 rotate-45" {api.arrow_attrs}></div>
  </div>
</Overlay.tooltip>

Setup

To use the tooltip component, you’ll have to import Floating and Tooltip modules in your assets/app.js.

import { createSproutConfig, Floating, Tooltip } from "sprout-ui";

const { initComponents, handleDomChange } = createSproutConfig({
  components: [Floating(), Tooltip()],
});

Anatomy

<sp-tooltip data-state="open | closed">
  <div data-part="trigger"></div>
  <div data-part="container">
    <div data-part="arrow"></div>
  </div>
</sp-tooltip>

trigger: the trigger for the tooltip
container: the container for the tooltip content
arrow: optional arrow for the tooltip container

Under the hood, all the slot contents are rendered inside a sp-tooltip custom element.

Be cautious that the container must be a div tag because internally it is actually a customized builtin element.

Attributes

Attribute	Type	Description
`placement`	`:string`	Default placement for the tooltip, default to `"top"`
`offset`	`:integer`	The offset between the tooltip and the trigger
`open_delay`	`:integer`	Delay in milliseconds before showing the tooltip
`close_delay`	`:integer`	Delay in milliseconds before hiding the tooltip
`on_open`	`JS`	JS commands executed when the tooltip is showing
`on_close`	`JS`	JS commands executed when the tooltip is hiding
`rest`	`:global`	Global attributes to be passed to the `sp-tooltip` element

API

API	Description
`trigger_attrs`	Attributes to be passed to the trigger part
`container_attrs`	Attributes to be passed to the container part
`arrow_attrs`	Attributes to be passed to the arrow part

Transition

The container element can have transitions when the tooltip is showing or hiding. Check out the guide on Transition.

Accessibility

When a tooltip is active, press Escape will dismiss the tooltip. The tooltip will show up when the trigger element receives focus and will dismiss when the trigger loses focus.