@pindoba/astro-tooltip 0.0.0-alpha-20260426220647

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright 2025 Eduardo Lopes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
+FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+DEALINGS IN THE SOFTWARE.

package/index.ts

@@ -0,0 +1,7 @@
+// Do not write code directly here, instead use the `src` folder!
+// Then, use this file to export everything you want your user to access.
+
+import Component from "./src/tooltip.astro";
+export * from "./src/tooltip.astro";
+
+export default Component;

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@pindoba/astro-tooltip",
+  "version": "0.0.0-alpha-20260426220647",
+  "homepage": "https://github.com/EduardoLopes/pindoba/tree/main/packages/ui/astro/tooltip#README.md",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/EduardoLopes/pindoba.git",
+    "directory": "packages/ui/astro/tooltip"
+  },
+  "sideEffects": false,
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": "./index.ts",
+    "./use-tooltip": "./src/useTooltip.ts",
+    "./demos": "./src/demos/index.ts",
+    "./demos/default": "./src/demos/default.astro",
+    "./demos/placement": "./src/demos/placement.astro",
+    "./demos/group": "./src/demos/group.astro"
+  },
+  "files": [
+    "src",
+    "index.ts"
+  ],
+  "keywords": [
+    "astro-component"
+  ],
+  "devDependencies": {
+    "@astrojs/check": "^0.9.8",
+    "astro": "^6.1.9",
+    "typescript": "^6.0.3"
+  },
+  "peerDependencies": {
+    "astro": "^4.0.0"
+  },
+  "dependencies": {
+    "@pindoba/core-tooltip": "0.0.0-alpha-20260426220647",
+    "@pindoba/styles-tooltip": "0.0.0-alpha-20260426220647",
+    "@pindoba/utils": "0.0.0-alpha-20260426220647",
+    "@pindoba/styled-system": "0.0.0-alpha-20260426220647"
+  },
+  "scripts": {
+    "lint": "TIMING=1 eslint . --max-warnings 0",
+    "lint:fix": "TIMING=1 eslint . --fix --max-warnings 0",
+    "format": "prettier --write .",
+    "format:fix": "prettier --write .",
+    "check": "astro check",
+    "dev": "astro check --watch",
+    "clean": "rm -rf .astro && rm -rf node_modules && rm -rf .turbo"
+  }
+}

package/src/demos/default.astro

@@ -0,0 +1,11 @@
+---
+import Tooltip from "../tooltip.astro";
+import { stack } from "@pindoba/styled-system/patterns";
+import { css } from "@pindoba/styled-system/css";
+---
+
+<div class={stack({ gap: "md", direction: "row", align: "center" })}>
+  <Tooltip id="astro-demo-tooltip-default" content="Save the document (⌘S)">
+    <button class={css({ px: "sm", py: "xs" })}>Save</button>
+  </Tooltip>
+</div>

package/src/demos/group.astro

@@ -0,0 +1,34 @@
+---
+import Tooltip from "../tooltip.astro";
+import { stack } from "@pindoba/styled-system/patterns";
+import { css } from "@pindoba/styled-system/css";
+
+const actions = [
+  { id: "bold", label: "Bold (⌘B)", icon: "B" },
+  { id: "italic", label: "Italic (⌘I)", icon: "I" },
+  { id: "underline", label: "Underline (⌘U)", icon: "U" },
+  { id: "strike", label: "Strikethrough", icon: "S" },
+  { id: "link", label: "Insert link (⌘K)", icon: "🔗" },
+];
+
+const buttonClass = css({
+  px: "sm",
+  py: "xs",
+  minWidth: "2.25rem",
+  borderRadius: "sm",
+  fontFamily: "mono",
+  fontSize: "sm",
+});
+---
+
+<div class={stack({ gap: "2xs", direction: "row", align: "center" })}>
+  {
+    actions.map((action) => (
+      <Tooltip id={`astro-tt-group-${action.id}`} content={action.label}>
+        <button class={buttonClass} aria-label={action.label}>
+          {action.icon}
+        </button>
+      </Tooltip>
+    ))
+  }
+</div>

package/src/demos/index.ts

@@ -0,0 +1,3 @@
+export { default as Default } from "./default.astro";
+export { default as Placement } from "./placement.astro";
+export { default as Group } from "./group.astro";

package/src/demos/placement.astro

@@ -0,0 +1,21 @@
+---
+import Tooltip from "../tooltip.astro";
+import { stack } from "@pindoba/styled-system/patterns";
+import { css } from "@pindoba/styled-system/css";
+
+const placements = ["top", "right", "bottom", "left"] as const;
+---
+
+<div class={stack({ gap: "md", direction: "row", align: "center" })}>
+  {
+    placements.map((placement) => (
+      <Tooltip
+        id={`astro-tt-placement-${placement}`}
+        content={`Tooltip on ${placement}`}
+        placement={placement}
+      >
+        <button class={css({ px: "sm", py: "xs" })}>{placement}</button>
+      </Tooltip>
+    ))
+  }
+</div>

package/src/env.d.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../.astro/types.d.ts" />

package/src/tooltip.astro

@@ -0,0 +1,106 @@
+---
+import { cx } from "@pindoba/styled-system/css";
+import { tooltipStyles, type TooltipStyleProps } from "@pindoba/styles-tooltip";
+import type { Placement, TooltipTriggerStrategy } from "@pindoba/core-tooltip";
+import { generateUUID } from "@pindoba/utils";
+
+export interface Props {
+  id?: string;
+  content: string;
+  placement?: Placement;
+  triggerStrategy?: TooltipTriggerStrategy;
+  openDelay?: number;
+  closeDelay?: number;
+  offset?: number;
+  size?: TooltipStyleProps["size"];
+}
+
+const {
+  id = `tooltip-${generateUUID()}`,
+  content,
+  placement = "top",
+  triggerStrategy,
+  openDelay,
+  closeDelay,
+  offset: offsetProp,
+  size = "md",
+} = Astro.props;
+
+const classes = tooltipStyles({ size });
+const rootClassName = cx(classes.root);
+const triggerClassName = cx(classes.trigger);
+---
+
+<span
+  data-tooltip-trigger
+  data-tooltip-id={id}
+  data-tooltip-content={content}
+  data-tooltip-placement={placement}
+  data-tooltip-strategy={triggerStrategy ?? ""}
+  data-tooltip-open-delay={openDelay ?? ""}
+  data-tooltip-close-delay={closeDelay ?? ""}
+  data-tooltip-offset={offsetProp ?? ""}
+  data-tooltip-classname={rootClassName}
+  class={triggerClassName}
+>
+  <slot />
+</span>
+
+<script>
+  import { createTooltip } from "@pindoba/core-tooltip";
+
+  function boot() {
+    const triggers = document.querySelectorAll<HTMLElement>(
+      "[data-tooltip-trigger]:not([data-tooltip-initialized])",
+    );
+
+    const instances: Array<{ destroy: () => void }> = [];
+
+    triggers.forEach((trigger) => {
+      trigger.setAttribute("data-tooltip-initialized", "true");
+      const tooltipId = trigger.getAttribute("data-tooltip-id");
+      if (!tooltipId) return;
+
+      const content = trigger.getAttribute("data-tooltip-content") ?? "";
+      const placement = (trigger.getAttribute("data-tooltip-placement") ||
+        "top") as never;
+      const strategy =
+        trigger.getAttribute("data-tooltip-strategy") || undefined;
+      const openDelay = trigger.getAttribute("data-tooltip-open-delay");
+      const closeDelay = trigger.getAttribute("data-tooltip-close-delay");
+      const offsetAttr = trigger.getAttribute("data-tooltip-offset");
+      const rootClassName =
+        trigger.getAttribute("data-tooltip-classname") ?? "";
+
+      const tooltip = createTooltip({
+        id: tooltipId,
+        placement,
+        triggerStrategy: strategy as never,
+        openDelay: openDelay ? Number(openDelay) : undefined,
+        closeDelay: closeDelay ? Number(closeDelay) : undefined,
+        offset: offsetAttr ? Number(offsetAttr) : undefined,
+        rootClassName,
+        getContent: () => content,
+      });
+
+      // Wrapper is `display: contents` — its own getBoundingClientRect is
+      // 0×0, which would place the tooltip at viewport origin. Use the first
+      // element child as the floating-ui reference so positioning tracks the
+      // visible target. Falls back to the wrapper if no child element exists
+      // (e.g., text-only triggers).
+      const reference =
+        (trigger.firstElementChild as HTMLElement | null) ?? trigger;
+      tooltip.setTriggerElement(reference);
+      instances.push(tooltip);
+    });
+
+    const teardown = () => {
+      for (const t of instances) t.destroy();
+    };
+    window.addEventListener("pagehide", teardown, { once: true });
+    document.addEventListener("astro:before-swap", teardown, { once: true });
+  }
+
+  boot();
+  document.addEventListener("astro:page-load", boot);
+</script>