Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

import { useState, useRef } from 'react';

// Search box: submit on Enter, clear on Escape
function SearchBox({ onSearch }) {
  const [query, setQuery] = useState('');
  const inputRef = useRef(null);

return (
    <input
      ref={inputRef}
      type="search"
      value={query}
      placeholder="Search… (Enter to submit, Esc to clear)"
      onChange={e => setQuery(e.target.value)}
      onKeyDown={handleKeyDown}
    />
  );
}

// Hover card using onMouseEnter / onMouseLeave
function HoverCard({ label, detail }) {
  const [visible, setVisible] = useState(false);
  return (
    <span
      style={{ position: 'relative', display: 'inline-block', cursor: 'pointer' }}
      onMouseEnter={() => setVisible(true)}
      onMouseLeave={() => setVisible(false)}
    >
      {label}
      {visible && (
        <span style={{ position: 'absolute', top: '1.5em', left: 0, background: '#333', color: '#fff', padding: '4px 8px', borderRadius: 4, whiteSpace: 'nowrap' }}>
          {detail}
        </span>
      )}
    </span>
  );
}

function App() {
  const [results, setResults] = useState([]);
  return (
    <div>
      <SearchBox onSearch={q => setResults(prev => [q, ...prev])} />
      <ul>{results.map((r, i) => <li key={i}>{r}</li>)}</ul>
      <p><HoverCard label="Hover me" detail="Secret tooltip text!" /></p>
    </div>
  );
}

export default App;