<.dm_tooltip :let={trigger_attrs} id="tooltip-single-default" content="Click to save changes">
  <.dm_btn variant="primary" {trigger_attrs}>Save</.dm_btn>
</.dm_tooltip>

<.dm_tooltip
  :let={trigger_attrs}
  id="tooltip-positions-bottom"
  position="bottom"
  content="Appears below"
>
  <.dm_btn variant="accent" {trigger_attrs}>Bottom</.dm_btn>
</.dm_tooltip>
<.dm_tooltip
  :let={trigger_attrs}
  id="tooltip-positions-left"
  position="left"
  content="Appears on the left"
>
  <.dm_btn variant="info" {trigger_attrs}>Left</.dm_btn>
</.dm_tooltip>
<.dm_tooltip
  :let={trigger_attrs}
  id="tooltip-positions-right"
  position="right"
  content="Appears on the right"
>
  <.dm_btn variant="success" {trigger_attrs}>Right</.dm_btn>
</.dm_tooltip>

<.dm_tooltip
  :let={trigger_attrs}
  id="tooltip-colors-primary"
  content="Primary tooltip"
  color="primary"
>
  <.dm_btn variant="primary" {trigger_attrs}>Primary</.dm_btn>
</.dm_tooltip>
<.dm_tooltip
  :let={trigger_attrs}
  id="tooltip-colors-secondary"
  content="Secondary tooltip"
  color="secondary"
>
  <.dm_btn variant="secondary" {trigger_attrs}>Secondary</.dm_btn>
</.dm_tooltip>
<.dm_tooltip
  :let={trigger_attrs}
  id="tooltip-colors-tertiary"
  content="Tertiary tooltip"
  color="tertiary"
>
  <.dm_btn variant="ghost" {trigger_attrs}>Tertiary</.dm_btn>
</.dm_tooltip>
<.dm_tooltip
  :let={trigger_attrs}
  id="tooltip-colors-warning"
  content="Warning message"
  color="warning"
>
  <.dm_btn variant="ghost" {trigger_attrs}>Warning</.dm_btn>
</.dm_tooltip>
<.dm_tooltip
  :let={trigger_attrs}
  id="tooltip-colors-error"
  position="bottom"
  content="Cannot be undone"
  color="error"
>
  <.dm_btn variant="error" {trigger_attrs}>Delete</.dm_btn>
</.dm_tooltip>
<.dm_tooltip
  :let={trigger_attrs}
  id="tooltip-colors-info"
  position="right"
  content="Press Ctrl+S to save"
  color="info"
>
  <.dm_btn variant="ghost" shape="square" {trigger_attrs}><.dm_mdi name="information" /></.dm_btn>
</.dm_tooltip>

<.dm_tooltip
  :let={trigger_attrs}
  id="tooltip-single-with-icon"
  content="Copy to clipboard"
  color="success"
>
  <.dm_btn variant="outline" shape="square" {trigger_attrs}>
    <.dm_mdi name="content-copy" />
  </.dm_btn>
</.dm_tooltip>

<.dm_tooltip
  :let={trigger_attrs}
  id="tooltip-single-metric-heading"
  content="Time until the first generated token."
>
  <button type="button" class="btn btn-ghost" {trigger_attrs}>TTFT</button>
</.dm_tooltip>

<.dm_tooltip
  :let={trigger_attrs}
  id="tooltip-single-confirm-delete"
  content="Delete record"
  color="error"
>
  <.dm_btn id="tooltip-confirm-delete" variant="error" {trigger_attrs}
    aria-label="Delete record" confirm="Delete this record?">
    Delete
  </.dm_btn>
</.dm_tooltip>