From b4a03b652fb4ea70cb19005a99c92b50da24469a Mon Sep 17 00:00:00 2001
From: Maximilian Kaske <56969857+mxkaske@users.noreply.github.com>
Date: Sun, 10 Dec 2023 15:04:43 +0100
Subject: [PATCH] feat: add tooltip to status widget container (#519)

---
 apps/docs/packages/react.mdx                  | 10 +++++--
 .../layout/status-widget-suspense.tsx         | 28 ++++++++++++++++++-
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/apps/docs/packages/react.mdx b/apps/docs/packages/react.mdx
index c9e166d60..9dd29cfc7 100644
--- a/apps/docs/packages/react.mdx
+++ b/apps/docs/packages/react.mdx
@@ -1,3 +1,9 @@
+Install the [npm](https://www.npmjs.com/package/@openstatus/react) package:
+
+```bash
+npm install @openstatus/react
+```
+
 ## React Server Component
 
 ```tsx
@@ -55,10 +61,8 @@ async function CustomStatusWidget() {
   // ^StatusResponse = { status: Status }
 
   const { status } = res;
-  // ^Status = "unknown" | "operational" | "degraded_performance" | "partial_outage" | "major_outage" | "under_maintenance"
+  // ^Status = "unknown" | "operational" | "degraded_performance" | "partial_outage" | "major_outage" | "under_maintenance" | "incident"
 
   return <div>{/* customize */}</div>;
 }
 ```
-
-[Link to npm](https://www.npmjs.com/package/@openstatus/react)
diff --git a/apps/web/src/components/layout/status-widget-suspense.tsx b/apps/web/src/components/layout/status-widget-suspense.tsx
index 39196bc6c..d5d3bc8e6 100644
--- a/apps/web/src/components/layout/status-widget-suspense.tsx
+++ b/apps/web/src/components/layout/status-widget-suspense.tsx
@@ -1,7 +1,15 @@
 import { Suspense } from "react";
+import { ExternalLink } from "lucide-react";
 
 import type { StatusWidgetProps } from "@openstatus/react";
 import { StatusWidget } from "@openstatus/react";
+import {
+  Button,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@openstatus/ui";
 
 export function StatusWidgetFallback() {
   return (
@@ -15,7 +23,25 @@ export function StatusWidgetFallback() {
 export function StatusWidgetContainer(props: StatusWidgetProps) {
   return (
     <Suspense fallback={<StatusWidgetFallback />}>
-      <StatusWidget {...props} />
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div className="max-w-min">
+              <StatusWidget {...props} />
+            </div>
+          </TooltipTrigger>
+          <TooltipContent asChild>
+            <Button variant="link" size="sm" asChild>
+              <a
+                target="_blank"
+                href="https://docs.openstatus.dev/packages/react"
+              >
+                Install your own <ExternalLink className="ml-1 h-3 w-3" />
+              </a>
+            </Button>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
     </Suspense>
   );
 }
-- 
2.51.2