Tooltip

A hover- and focus-triggered tooltip. One openId tracks which trigger is active, and aria-describedby is bound conditionally so screen readers only see the relationship while the tip is visible.

Markup

<template data-each="items" data-key="id">
  <span>
    <button
      @mouseenter="show"
      @mouseleave="hide"
      @focus="show"
      @blur="hide"
      data-bind="data-id:item.id, aria-describedby:item.id === openId ? ('tip-' + item.id) : false"
      data-text="item.label"
    ></button>
    <span
      role="tooltip"
      data-bind="id:'tip-' + item.id"
      data-show="item.id === openId"
      data-text="item.tip"
    ></span>
  </span>
</template>

Component

Micra.define("tooltip", {
  state: {
    openId: 0,
    items: [
      { id: 1, label: "Save", tip: "Save your changes" },
      { id: 2, label: "Share", tip: "Copy a public link" },
      { id: 3, label: "Archive", tip: "Hide without deleting" },
    ],
  },
  show(e) {
    this.state.openId = Number(e.currentTarget.dataset.id);
  },
  hide() {
    this.state.openId = 0;
  },
});

Binding aria-describedby to false removes the attribute entirely, so the association exists only while the tooltip is shown.