SpPopover

import { SpPopover } from '@silverpoint/react/ui/popover';

<SpPopover title="About this chart" closable width="260px" trigger={<button type="button">Details</button>}>
  <p>Anchored content, on a card frame. Escape or a click outside closes it.</p>
</SpPopover>

<script setup lang="ts">
import { SpPopover } from '@silverpoint/vue/ui/popover';
</script>

<template>
  <SpPopover title="About this chart" closable width="260px">
    <template #trigger><button type="button">Details</button></template>
    <p>Anchored content, on a card frame. Escape or a click outside closes it.</p>
  </SpPopover>
</template>

import { Component } from '@angular/core';
import { SpTrigger } from '@silverpoint/angular/ui';
import { SpPopover } from '@silverpoint/angular/ui/popover';

@Component({
  selector: 'app-about-chart',
  imports: [SpPopover, SpTrigger],
  template: `
    <sp-popover title="About this chart" [closable]="true" width="260px">
      <button type="button" spTrigger>Details</button>
      <p>Anchored content, on a card frame. Escape or a click outside closes it.</p>
    </sp-popover>
  `,
})
export class AboutChart {}

sp_popover(
    rx.el.p("Anchored content, on a card frame."),
    trigger=sp_trigger("Details", chevron=True),
    title="About this chart",
    closable=True,
    width=260,
)