Tooltip in five frameworks

The rendered popup

The attributes each framework puts on the open popup, read from the page.

Nothing open. Open a tile to fill its column.

The same example, in each framework

Each tile above runs this file.

import { Tooltip } from '@hamur/react/tooltip'

export default function TooltipExample() {
  return (
    <Tooltip.Provider>
      <Tooltip.Root>
        <Tooltip.Trigger className="button" aria-label="Bold">
          B
        </Tooltip.Trigger>
        <Tooltip.Portal>
          <Tooltip.Positioner sideOffset={8}>
            <Tooltip.Popup className="tooltip">
              <Tooltip.Arrow className="arrow" />
              Bold
            </Tooltip.Popup>
          </Tooltip.Positioner>
        </Tooltip.Portal>
      </Tooltip.Root>
    </Tooltip.Provider>
  )
}

Measured, per framework

The frameworks against each other only, on the same machine and the same example.

Size is the gzip of the component's entry with core and dom. Open, Close and Memory are medians in Chromium 156 on Apple M3 Max, 35 runs per framework; Memory is what one open and close leaves on the heap. Tests are Tooltip's passing tests in each framework's suites. [N] is a value not measured yet.

Same props, five spellings

The Tooltip.Root names in each framework's own syntax.