Status widget + tooltip

[eastcoasting]

Hi - I've been enjoying using open status so far - thanks for the project!

A few weeks ago I built out a tooltip for our status page that is roughly similar to the status widget you all are working on now that I saw on twitter earlier.

Would you both be interested in also adding functionality to show more than the current status, ours right now when hovered has a tooltip with our status page for our primary app and API. I hacked this together using the og image from openstatus, but ideally this could be less flaky and use a custom og image or alert data, so there is no need to fetch and resize the og image in the browser.

Because we have a working prototype I'd be happy to help pull this together if it made sense.

[mxkaske]

Hey @eastcoasting!

Thanks for opening the discussion. And nice try!

Gotcha. Let me rephrase it. You are interested in a HoverCard that displays more informations than just a summary. Similar to a “mini” status page. Like: last X pings of your monitors, description,…

I agree that from a UX/UI perspective, a proper html component is better than the og image.

[eastcoasting]

Exactly - I included a version below.

It seems like there could be some efficiencies in taking advantage of the OG image pipeline given most would probably not want to have interactive tooltips for the actual underlying data in a popup window? Changing the input dimensions (to remove some whitespace), and background color to match as input params to the OG endpoint could be a simple solution. If there were additional metrics or data to include that could also be included there. In terms of caching data it seems unnecessary to fire off a request and build the same chart in two places (hover card and OG image).

Relevant snippet here:

 <HoverCardPrimitive.Content
  sideOffset={14}
  className="h-28 w-72 overflow-clip data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50"
>
  <a href={"https://link.openstatus.dev/"} target="_blank">
    <img
      src={
        "https://www.openstatus.dev/api/og?monitorId=ID&title=untitled&description=description."
      }
      alt="Site status hover card"
      className="relative z-50 rounded-md border border-slate-200 bg-white p-2 -translate-y-7 text-slate-950 shadow-md outline-none dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50"
      style={{ objectFit: "contain" }}
    />
  </a>
</HoverCardPrimitive.Content>;