Tooltip

const tooltipFixture = {
  id: "tooltip",
  trigger: "Hover for tooltip",
  content: "Last deploy 14m ago · v2.4.1",
  side: "top",
} satisfies {
  id: string;
  trigger: string;
  content: string;
  side: "top" | "bottom";
};
 
import { Tooltip } from "@grassroot/ui-react";
 
export default function TooltipDemo() {
  return (
    <div>
      <Tooltip content={<span>{tooltipFixture.content}</span>} side={tooltipFixture.side}>
        <button type="button" className="text-body underline decoration-dotted underline-offset-4">
          {tooltipFixture.trigger}
        </button>
      </Tooltip>
    </div>
  );
}

<script setup lang="ts">
const tooltipFixture = {
  id: "tooltip",
  trigger: "Hover for tooltip",
  content: "Last deploy 14m ago · v2.4.1",
  side: "top",
} satisfies {
  id: string;
  trigger: string;
  content: string;
  side: "top" | "bottom";
};
 
import { Tooltip } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <Tooltip :side="tooltipFixture.side">
      <template #default>
        <button type="button" class="text-body underline decoration-dotted underline-offset-4">
          {{ tooltipFixture.trigger }}
        </button>
      </template>
      <template #content
        ><span>{{ tooltipFixture.content }}</span></template
      >
    </Tooltip>
  </div>
</template>

import { Component } from "@angular/core";
const tooltipFixture = {
  id: "tooltip",
  trigger: "Hover for tooltip",
  content: "Last deploy 14m ago · v2.4.1",
  side: "top",
} satisfies {
  id: string;
  trigger: string;
  content: string;
  side: "top" | "bottom";
};
 
import { GrassrootTooltip, GrassrootTooltipTrigger } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-tooltip-demo",
  standalone: true,
  imports: [GrassrootTooltip, GrassrootTooltipTrigger],
  template: `
    <div>
      <grassroot-tooltip [side]="fixture.side">
        <button
          grassrootTooltipTrigger
          type="button"
          class="text-body underline decoration-dotted underline-offset-4"
        >
          {{ fixture.trigger }}
        </button>
        <span grassrootTooltipContent>{{ fixture.content }}</span>
      </grassroot-tooltip>
    </div>
  `,
})
export class TooltipDemoComponent {
  protected readonly fixture = tooltipFixture;
}
 
export default TooltipDemoComponent;

<script lang="ts">
  import { Tooltip } from "@grassroot/ui-svelte";
  const tooltipFixture = {
    id: "tooltip",
    trigger: "Hover for tooltip",
    content: "Last deploy 14m ago · v2.4.1",
    side: "top",
  } satisfies {
    id: string;
    trigger: string;
    content: string;
    side: "top" | "bottom";
  };
 
  </script>
 
{#snippet content()}<span>{tooltipFixture.content}</span>{/snippet}
{#snippet children(describedby: string, triggerProps)}<button
    {...triggerProps}
    type="button"
    class="text-body underline decoration-dotted underline-offset-4"
    aria-describedby={describedby}>{tooltipFixture.trigger}</button
  >{/snippet}
<div>
  <Tooltip side={tooltipFixture.side} {content} {children} />
</div>

/** @jsxImportSource solid-js */
import { Tooltip } from "@grassroot/ui-solid";
const tooltipFixture = {
  id: "tooltip",
  trigger: "Hover for tooltip",
  content: "Last deploy 14m ago · v2.4.1",
  side: "top",
} satisfies {
  id: string;
  trigger: string;
  content: string;
  side: "top" | "bottom";
};
 
export default function TooltipDemo() {
  return (
    <div>
      <Tooltip content={<span>{tooltipFixture.content}</span>} side={tooltipFixture.side}>
        {(describedby, triggerProps) => (
          <button
            type="button"
            class="text-body underline decoration-dotted underline-offset-4"
            aria-describedby={describedby}
            data-scope={triggerProps["data-scope"]}
            data-part={triggerProps["data-part"]}
            data-state={triggerProps.dataState()}
          >
            {tooltipFixture.trigger}
          </button>
        )}
      </Tooltip>
    </div>
  );
}