Tooltip

<button class="btn btn-outline" id="tooltip-trigger">Hover me</button>

<div class="tooltip" id="demo-tooltip" popover="manual" data-pk-anchor="#tooltip-trigger" data-pk-placement="top">
  Add to library
</div>

Usage

<button class="btn btn-outline" id="save">Save</button>

<div class="tooltip" popover="manual" data-pk-anchor="#save" data-pk-placement="top">
  Add to library
</div>

The tooltip is pointed at its trigger with data-pk-anchor, and partialkit connects the two with aria-describedby. It opens on hover or focus after a short pause, and closes on leave, blur, Escape, or the click it was describing.

Attribute	Meaning
`popover="manual"`	Required: an `auto` popover would close whatever menu is already open
`data-pk-anchor`	Selector for the trigger
`data-pk-placement`	A side — `top`, `bottom`, `left`, `right` — centred on the trigger, or with `-start` / `-end` to align to an edge
`data-pk-delay`	Milliseconds before it opens. Defaults to `600`

Sides

<div style="display: grid; justify-items: center; gap: 0.75rem; padding: 1rem 5rem">
  <button class="btn btn-outline" id="tooltip-top-trigger">Top</button>
  <div class="tooltip" popover="manual" data-pk-anchor="#tooltip-top-trigger" data-pk-placement="top">Top</div>

  <div style="display: flex; gap: 7rem">
    <button class="btn btn-outline" id="tooltip-start-trigger">Start</button>
    <div class="tooltip" popover="manual" data-pk-anchor="#tooltip-start-trigger" data-pk-placement="left">Start</div>

    <button class="btn btn-outline" id="tooltip-end-trigger">End</button>
    <div class="tooltip" popover="manual" data-pk-anchor="#tooltip-end-trigger" data-pk-placement="right">End</div>
  </div>

  <button class="btn btn-outline" id="tooltip-bottom-trigger">Bottom</button>
  <div class="tooltip" popover="manual" data-pk-anchor="#tooltip-bottom-trigger" data-pk-placement="bottom">Bottom</div>
</div>

With a shortcut

Keys inside a tooltip use Kbd, which picks up the dark surface on its own.

<button class="btn btn-outline btn-icon" id="tooltip-shortcut-trigger">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M5 12h14M12 5v14"></path>
  </svg>
  <span class="sr-only">New document</span>
</button>

<div
  class="tooltip"
  popover="manual"
  data-pk-anchor="#tooltip-shortcut-trigger"
  data-pk-placement="top"
>
  New document
  <span class="kbd-group">
    <kbd class="kbd">⌘</kbd>
    <kbd class="kbd">N</kbd>
  </span>
</div>

Delay

<button class="btn btn-outline" id="tooltip-instant-trigger">No delay</button>
<div
  class="tooltip"
  popover="manual"
  data-pk-anchor="#tooltip-instant-trigger"
  data-pk-placement="top"
  data-pk-delay="0"
>
  Opens straight away
</div>

<button class="btn btn-outline" id="tooltip-slow-trigger">Long delay</button>
<div
  class="tooltip"
  popover="manual"
  data-pk-anchor="#tooltip-slow-trigger"
  data-pk-placement="top"
  data-pk-delay="1200"
>
  Waits 1.2 seconds
</div>

A tooltip is a label you cannot interact with: no links, no buttons, no selectable text. A popover holds content people act on. If it contains anything clickable, it is a popover.

RTL

Set dir="rtl" on the page or on any subtree — the side placements follow the reading direction. See the button page for a live example.

Accessibility

The trigger is described by the tooltip, through aria-describedby. That is what makes the text reach a screen reader — the panel itself is never focused.
An icon-only button still needs a name. A tooltip is a description, not a label: keep the .sr-only text inside the button.
Focus opens it too. A keyboard user gets the same hint as a mouse user, which is why the trigger listens for focus and not only pointerenter.
Escape dismisses it while the trigger keeps focus, so a tooltip covering the page can be got rid of without moving.
popover="manual", always. Auto popovers dismiss each other; a tooltip appearing over an open menu must not close it.