<.dm_tooltip content="Click to save changes">
  <.dm_btn variant="primary">Save</.dm_btn>
</.dm_tooltip>

<.dm_tooltip content="This is a top tooltip">
  <.dm_btn variant="secondary">Top</.dm_btn>
</.dm_tooltip>

<.dm_tooltip position="bottom" content="This appears below">
  <.dm_btn variant="accent">Bottom</.dm_btn>
</.dm_tooltip>

<.dm_tooltip position="left" content="Appears on the left">
  <.dm_btn variant="info">Left</.dm_btn>
</.dm_tooltip>

<.dm_tooltip position="right" content="Appears on the right">
  <.dm_btn variant="success">Right</.dm_btn>
</.dm_tooltip>

<.dm_tooltip content="Warning message" color="warning">
  <.dm_btn variant="ghost">Warning</.dm_btn>
</.dm_tooltip>

<.dm_tooltip position="bottom" content="This action cannot be undone" color="error">
  <.dm_btn variant="error">Delete</.dm_btn>
</.dm_tooltip>

<.dm_tooltip position="right" content="Press Ctrl+S to save" color="info">
  <.dm_mdi>information</.dm_mdi>
</.dm_tooltip>

<.dm_tooltip content="Copy to clipboard" color="success">
  <.dm_btn variant="outline" shape="square">
    <.dm_mdi>content-copy</.dm_mdi>
  </.dm_btn>
</.dm_tooltip>

<.dm_tooltip open content="This tooltip is always visible" color="accent">
  <.dm_btn variant="ghost">Always Open</.dm_btn>
</.dm_tooltip>