Tooltip

import { Tooltip, Button } from "@grassroot/ui-react";
 
<Tooltip content="Last deploy 14m ago · v2.4.1">
  <Button variant="ghost">Hover for tooltip</Button>
</Tooltip>

<script setup lang="ts">
import { Button, Tooltip } from "@grassroot/ui-vue";
</script>
 
<template>
  <Tooltip
    content="Last deploy 14m ago · v2.4.1"
  >
    <Button variant="ghost">Hover for tooltip</Button>
  </Tooltip>
</template>

import { Component } from "@angular/core";
import { GrassrootButton, GrassrootTooltip } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootButton, GrassrootTooltip],
  template: `
    <grassroot-tooltip
      content="Last deploy 14m ago · v2.4.1"
    >
      <grassroot-button variant="ghost">Hover for tooltip</grassroot-button>
    </grassroot-tooltip>
  `,
})
export class ExampleComponent {
}

<script lang="ts">
  import { Button, Tooltip } from "@grassroot/ui-svelte";
</script>
 
<Tooltip
  content="Last deploy 14m ago · v2.4.1"
>
  <Button variant="ghost">Hover for tooltip</Button>
</Tooltip>

import { Button, Tooltip } from "@grassroot/ui-solid";
 
export function Example() {
  return (
    <>
      <Tooltip
        content="Last deploy 14m ago · v2.4.1"
      >
        <Button variant="ghost">Hover for tooltip</Button>
      </Tooltip>
    </>
  );
}