Tooltip

<button type="button" class="aura-btn aura-btn--secondary" aria-describedby="t1">Delete</button>

<div id="t1" role="tooltip" data-state="open" class="aura-popup aura-tooltip">Delete this space</div>

import { Button, Group, IconButton, Tooltip } from '@ilomee/aura-react';

/**
 * Hover or focus either control. The panel is portalled to `document.body` and positioned by
 * `place()`, so it flips when it does not fit and follows a scroll.
 *
 * The second one shows `names`: an icon-only button has no text, so there the tooltip is not an
 * addition to the name — it is the name, and being both would mean being announced twice.
 */
export default function Demo() {
  return (
    <Group>
      <Tooltip label="Delete this space">
        <Button variant="secondary">Delete</Button>
      </Tooltip>
      <Tooltip label="Settings" names>
        {/*
          Named here as well as by the tooltip. `names` points `aria-labelledby` at the tooltip
          only while it is open, so an icon-only button with nothing else would be nameless for
          as long as nobody is hovering it — which is most of the time. `aria-labelledby` wins
          while the tooltip is up, so the two never disagree.
        */}
        <IconButton aria-label="Settings">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
            <circle cx="12" cy="12" r="3" />
            <path d="M12 2v4M12 18v4M2 12h4M18 12h4" />
          </svg>
        </IconButton>
      </Tooltip>
    </Group>
  );
}

<script setup lang="ts">
import { Tooltip, Button } from '@ilomee/aura-vue';
</script>

<template>
  <Tooltip label="Delete this space">
    <Button variant="secondary">Delete</Button>
  </Tooltip>
</template>

<script lang="ts">
  import { tooltip, Button } from '@ilomee/aura-svelte';
</script>

<Button variant="secondary" {@attach tooltip({ label: 'Delete this space' })}>Delete</Button>

<button auraButton variant="secondary" auraTooltip="Delete this space">Delete</button>