Tooltip <l-tooltip>

Tooltips are used to display a short text label on hover or focus to describe an element. Commonly used on icon buttons, truncated text, and controls that need additional context.

HTML tag<l-tooltip>

⏣Native HTML

⬡Progressive

◇Custom

⬢Shadow DOM

Custom Element · Shadow DOM

Options

Basic

Reference a trigger element by ID using the for attribute.

Save changes

Code

HTML

<button
  id="tooltip-basic"
  class="l-button"
>
  Hover me
</button>
<l-tooltip for="tooltip-basic">Save changes</l-tooltip>

Placement

Set placement to control position: top (default), bottom, left, right.

Top Bottom Left Right

Code

HTML

<div class="flex flex-wrap items-center gap-4">
  <button
    id="tooltip-top"
    class="l-button"
  >
    Top
  </button>
  <l-tooltip
    for="tooltip-top"
    placement="top"
    >Top</l-tooltip
  >

  <button
    id="tooltip-bottom"
    class="l-button"
  >
    Bottom
  </button>
  <l-tooltip
    for="tooltip-bottom"
    placement="bottom"
    >Bottom</l-tooltip
  >

  <button
    id="tooltip-left"
    class="l-button"
  >
    Left
  </button>
  <l-tooltip
    for="tooltip-left"
    placement="left"
    >Left</l-tooltip
  >

  <button
    id="tooltip-right"
    class="l-button"
  >
    Right
  </button>
  <l-tooltip
    for="tooltip-right"
    placement="right"
    >Right</l-tooltip
  >
</div>

Trigger

Set trigger to control activation: hover focus (default), click, hover, focus, manual.

Click-triggered tooltip

Code

HTML

<button
  id="tooltip-click"
  class="l-button"
>
  Click me
</button>
<l-tooltip
  for="tooltip-click"
  trigger="click"
  >Click-triggered tooltip</l-tooltip
>

Without arrow

Add without-arrow to hide the directional arrow.

No arrow tooltip

Code

HTML

<button
  id="tooltip-no-arrow"
  class="l-button"
>
  Hover me
</button>
<l-tooltip
  for="tooltip-no-arrow"
  without-arrow
  >No arrow tooltip</l-tooltip
>

Examples

All placements

All 12 placement options with aligned variants (-start, -end).

top-start top top-end bottom-start bottom bottom-end left-start left left-end right-start right right-end

Code

HTML

<div class="relative mx-auto h-80 w-80">
  <button
    id="p-top-start"
    class="l-button absolute"
    style="left: calc(50% - 70px - 1rem); top: 0"
    aria-label="top-start"
  >
    &#9632;
  </button>
  <l-tooltip
    for="p-top-start"
    placement="top-start"
    >top-start</l-tooltip
  >

  <button
    id="p-top"
    class="l-button absolute"
    style="left: calc(50% - 10px - 1rem); top: 0"
    aria-label="top"
  >
    &#9632;
  </button>
  <l-tooltip
    for="p-top"
    placement="top"
    >top</l-tooltip
  >

  <button
    id="p-top-end"
    class="l-button absolute"
    style="left: calc(50% + 50px - 1rem); top: 0"
    aria-label="top-end"
  >
    &#9632;
  </button>
  <l-tooltip
    for="p-top-end"
    placement="top-end"
    >top-end</l-tooltip
  >

  <button
    id="p-bottom-start"
    class="l-button absolute"
    style="left: calc(50% - 70px - 1rem); bottom: 0"
    aria-label="bottom-start"
  >
    &#9632;
  </button>
  <l-tooltip
    for="p-bottom-start"
    placement="bottom-start"
    >bottom-start</l-tooltip
  >

  <button
    id="p-bottom"
    class="l-button absolute"
    style="left: calc(50% - 10px - 1rem); bottom: 0"
    aria-label="bottom"
  >
    &#9632;
  </button>
  <l-tooltip
    for="p-bottom"
    placement="bottom"
    >bottom</l-tooltip
  >

  <button
    id="p-bottom-end"
    class="l-button absolute"
    style="left: calc(50% + 50px - 1rem); bottom: 0"
    aria-label="bottom-end"
  >
    &#9632;
  </button>
  <l-tooltip
    for="p-bottom-end"
    placement="bottom-end"
    >bottom-end</l-tooltip
  >

  <button
    id="p-left-start"
    class="l-button absolute"
    style="top: calc(50% - 70px - 1rem); left: 0"
    aria-label="left-start"
  >
    &#9632;
  </button>
  <l-tooltip
    for="p-left-start"
    placement="left-start"
    >left-start</l-tooltip
  >

  <button
    id="p-left"
    class="l-button absolute"
    style="top: calc(50% - 10px - 1rem); left: 0"
    aria-label="left"
  >
    &#9632;
  </button>
  <l-tooltip
    for="p-left"
    placement="left"
    >left</l-tooltip
  >

  <button
    id="p-left-end"
    class="l-button absolute"
    style="top: calc(50% + 50px - 1rem); left: 0"
    aria-label="left-end"
  >
    &#9632;
  </button>
  <l-tooltip
    for="p-left-end"
    placement="left-end"
    >left-end</l-tooltip
  >

  <button
    id="p-right-start"
    class="l-button absolute"
    style="top: calc(50% - 70px - 1rem); right: 0"
    aria-label="right-start"
  >
    &#9632;
  </button>
  <l-tooltip
    for="p-right-start"
    placement="right-start"
    >right-start</l-tooltip
  >

  <button
    id="p-right"
    class="l-button absolute"
    style="top: calc(50% - 10px - 1rem); right: 0"
    aria-label="right"
  >
    &#9632;
  </button>
  <l-tooltip
    for="p-right"
    placement="right"
    >right</l-tooltip
  >

  <button
    id="p-right-end"
    class="l-button absolute"
    style="top: calc(50% + 50px - 1rem); right: 0"
    aria-label="right-end"
  >
    &#9632;
  </button>
  <l-tooltip
    for="p-right-end"
    placement="right-end"
    >right-end</l-tooltip
  >
</div>

Accessibility

Criteria

Role

Popover has role="tooltip" with a generated id

WCAG4.1.2

RGAA7.1

Accessible description

Trigger receives aria-describedby pointing to the tooltip when open

WCAG4.1.2

RGAA11.1

Hover state

Shows on pointerenter; safe polygon hover bridge prevents flickering

WCAG1.4.13

Focus state

Shows on focusin, hides on focusout

WCAG1.4.132.4.7

Dismissible

Closes on Escape without moving focus

WCAG1.4.13

Motion

Respects prefers-reduced-motion

WCAG2.3.3

Keyboard interactions

Escape

Dismisses the tooltip without moving focus

Tab

Moving focus to the trigger shows the tooltip; moving away hides it

API reference

Importing

JS

import 'luxen-ui/tooltip';

Attributes & Properties

forAttribute

ID of the trigger element

placementAttribute

Preferred placement: top (default), top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end

distanceAttribute

Offset from trigger in px. Default 8

openAttribute

Whether tooltip is visible. Reflects to attribute

without-arrowAttribute

Hide the directional arrow

triggerAttribute

Space-separated trigger modes: hover focus (default), click, manual

Methods

show()Method

Shows the tooltip

hide()Method

Hides the tooltip

toggle()Method

Toggles the tooltip

CSS custom properties

--backgroundName

Background color. Default: dark in light mode, light in dark mode

--colorName

Text color

--radiusName

Border radius. Default 4px

--max-widthName

Maximum width. Default 180px

--arrow-sizeName

Arrow size. Default 6px

--show-durationName

Show animation duration. Default 150ms

--hide-durationName

Hide animation duration. Default 150ms