Popover

import { Popover } from "@grassroot/ui-react";
 
<Popover trigger="ledger-api">
  <div className="px-1.5 py-1 font-semibold text-heading">ledger-api</div>
  <div className="px-1.5 pb-2 text-body">Event-sourced payments ledger.</div>
</Popover>

<script setup lang="ts">
import { Popover } from "@grassroot/ui-vue";
</script>
 
<template>
  <Popover
    trigger="ledger-api"
  >
    <div className="px-1.5 py-1 font-semibold text-heading">ledger-api</div>
    <div className="px-1.5 pb-2 text-body">Event-sourced payments ledger.</div>
  </Popover>
</template>

import { Component } from "@angular/core";
import { GrassrootPopover } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootPopover],
  template: `
    <grassroot-popover
      trigger="ledger-api"
    >
      <div className="px-1.5 py-1 font-semibold text-heading">ledger-api</div>
      <div className="px-1.5 pb-2 text-body">Event-sourced payments ledger.</div>
    </grassroot-popover>
  `,
})
export class ExampleComponent {
}

<script lang="ts">
  import { Popover } from "@grassroot/ui-svelte";
</script>
 
<Popover
 
>{#snippet trigger()}ledger-api{/snippet}
 
  <div className="px-1.5 py-1 font-semibold text-heading">ledger-api</div>
  <div className="px-1.5 pb-2 text-body">Event-sourced payments ledger.</div>
</Popover>

import { Popover } from "@grassroot/ui-solid";
 
export function Example() {
  return (
    <>
      <Popover
        trigger="ledger-api"
      >
        <div className="px-1.5 py-1 font-semibold text-heading">ledger-api</div>
        <div className="px-1.5 pb-2 text-body">Event-sourced payments ledger.</div>
      </Popover>
    </>
  );
}