Tooltip ✦Documentation has not yet been reviewed by a human.

<div style={{ display: 'flex', gap: '16px', alignItems: 'center', flexWrap: 'wrap' }}>
  <span style={{ cursor: 'help', display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
    <span>Status</span>
    <Icon shape="info" size={16} style={{ color: 'var(--text-5)' }} />
    <Tooltip placement="top">Last checked 2 minutes ago</Tooltip>
  </span>
  <Button priority="tertiary" underline="dashed" label="Focus me with the keyboard">
    <Tooltip delay={50}>Shows on focus, dismiss with Esc</Tooltip>
  </Button>
  <Button label="Follow the cursor">
    <Tooltip follow>Tracks the pointer, fades as you leave</Tooltip>
  </Button>
  <Button label="Interact">
    <Tooltip interactive placement="top">
      See the <a href="/install/">full guide</a> for details
    </Tooltip>
  </Button>
</div>

<Button label="Publish" aria-description="Makes the draft public">
  <Tooltip id="publish-tooltip" delay={50}>Makes the draft public</Tooltip>
</Button>

<Button label="Below"><Tooltip>Below the anchor</Tooltip></Button>
<Button label="Above"><Tooltip placement="top">Above the anchor</Tooltip></Button>
<Button label="Left"><Tooltip placement="left">Left of the anchor</Tooltip></Button>
<Button label="Right"><Tooltip placement="right">Right of the anchor</Tooltip></Button>

<Button label="First"><Tooltip follow>First explanation</Tooltip></Button>
<Button label="Second"><Tooltip follow>Second explanation</Tooltip></Button>

<Button label="Help" aria-description="Read the installation guide for setup details">
  <Tooltip id="help-tooltip" interactive placement="top">
    Read the <a href="/install/">installation guide</a>.
  </Tooltip>
</Button>

import { Tooltip, Button, Checkbox, Text } from '@antadesign/anta'
import { useEffect, useRef, useState } from 'preact/hooks'
import styles from './TooltipContainEventsPreview.module.css'

function Demo() {
  const parent = useRef<HTMLDivElement>(null)
  const [contain, setContain] = useState(true)
  const [wheels, setWheels] = useState(0)
  const [clicks, setClicks] = useState(0)

  useEffect(() => {
    const element = parent.current
    if (!element) return
    const onWheel = (event: WheelEvent) => {
      event.preventDefault()
      setWheels(count => count + 1)
    }
    element.addEventListener('wheel', onWheel, { passive: false })
    return () => element.removeEventListener('wheel', onWheel)
  }, [])

  return (
    <div className={styles.demo}>
      <Checkbox checked={contain} onStateChange={(_, { next }) => setContain(next === true)}>
        Contain tooltip events
      </Checkbox>
      <div ref={parent} className={styles.parent} onClick={() => setClicks(count => count + 1)}>
        <Button label="Event containment help">
          <Tooltip interactive containEvents={contain ? 'native' : false} className={styles.tooltip}>
            <div>
              <a href="#tooltip-end">Jump to the final note</a>
              {Array.from({ length: 12 }, (_, index) => (
                <p>{'Note ' + (index + 1) + ': Scroll inside this bubble to compare event containment.'}</p>
              ))}
              <p id="tooltip-end">You reached the final note.</p>
            </div>
          </Tooltip>
        </Button>
        <p>This parent cancels wheel events and counts clicks.</p>
        <Text>Parent wheel events: {wheels}</Text>
        <Text>Parent clicks: {clicks}</Text>
      </div>
    </div>
  )
}

.demo {
  display: grid;
  gap: 16px;
  width: 100%;
}
.parent {
  padding: 24px;
  border: 1px solid var(--border-2);
  border-radius: 8px;
}
.parent a-text {
  display: block;
}
.tooltip::part(bubble) {
  max-width: 280px;
  max-height: 180px;
}

<div style={{ display: 'flex', gap: '28px', alignItems: 'flex-start', flexWrap: 'wrap' }}>
  <span style={{ display: 'inline-block', maxWidth: '130px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', cursor: 'help' }}>
    A long label that gets truncated
    <Tooltip truncatedOnly>A long label that gets truncated</Tooltip>
  </span>
  <span style={{ display: 'inline-block', cursor: 'help' }}>
    Short label
    <Tooltip truncatedOnly>Short label</Tooltip>
  </span>
</div>

<Text truncate style={{ maxWidth: '160px' }}>
  A long release title that does not fit in this space
</Text>
<Text truncate>Short title</Text>

<Text truncate style={{ maxWidth: '160px' }}>
  A long release title with a custom explanation
  <Tooltip>This release includes keyboard navigation improvements.</Tooltip>
</Text>

<div style={{ display: 'flex', gap: '40px', alignItems: 'flex-start', flexWrap: 'wrap' }}>
  <div style={{ display: 'flex', gap: '12px' }}>
    <Button label="First"><Tooltip follow>First tooltip</Tooltip></Button>
    <Button label="Second"><Tooltip follow>Second tooltip</Tooltip></Button>
  </div>
  <div tabIndex={0} aria-label="Outer box" style={{ padding: '20px', border: '1px dashed var(--border-4)', borderRadius: '6px', cursor: 'help' }}>
    <span>Outer box</span>
    <Tooltip follow>Outer tooltip</Tooltip>
    <div style={{ marginTop: '12px' }}>
      <Button label="Inner button"><Tooltip follow>Inner tooltip</Tooltip></Button>
    </div>
  </div>
</div>

<Button label="Release status">
  <Tooltip round><strong>Healthy</strong> · Checked two minutes ago</Tooltip>
</Button>
<Button icon="info" aria-label="Action details">
  <Tooltip placement="top"><strong>Heads up</strong> · This action cannot be undone</Tooltip>
</Button>
<Button label="No explanation"><Tooltip>{''}</Tooltip></Button>