People · Floating tooltip

People

A person's card on their name: who they are and what time it is for them, without opening a profile.

The second crop of Coral sky reads better. Can we try it as the cover?

Works for me. The print run closes on Friday, so we have until Thursday night.

I'll trim the caption to one line so it sits under the photo.

import { createFloatingTooltip } from "@reuse-sh/interactions";

createFloatingTooltip(document.querySelector(".thread"), {
  selector: "[data-person]",
  content: (name) => personCard(people[name.dataset.person]),
});

import { FloatingTooltipGroup } from "@reuse-sh/interactions/react";

export function Thread({ comments }) {
  return (
    <FloatingTooltipGroup
      selector="[data-person]"
      content={(name) => personCard(people[name.dataset.person])}
    >
      {comments.map((comment) => <Comment key={comment.id} {...comment} />)}
    </FloatingTooltipGroup>
  );
}