Показывать окно компонента при наведении, как выпадающее меню и всплывающее окно

Question

Здравствуйте, я пытаюсь сделать что-то вроде этого:

По сути, я хотел показать окно с пиктограммой

код:

import React, { useState, useEffect } from "react";
import "./styles.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faSearch,
  faAdjust,
  faUserCircle,
  faAngleDown
} from "@fortawesome/free-solid-svg-icons";
export default function App() {
  const [hover, setHover] = useState(false);

  const updateHover = () => {
    setHover(!hover);
  };

  console.log(hover);
  return (
    <div className="App">
      <span>
        <FontAwesomeIcon
          className="adjust"
          icon={faAngleDown}
          size="lg"
          fixedWidth
          color="black"
          onMouseOver={updateHover}
        />
      </span>
    </div>
  );
}

В качестве всплывающего или выпадающего эффекта для имитации поля входа в систему

Answer 1

У вас есть логическое значение hover в состоянии, поэтому все, что вам нужно сделать сейчас, это показать или скрыть компонент в зависимости от значения:

  return (
    <div className="App">
      <span>
        <FontAwesomeIcon
          className="adjust"
          icon={faAngleDown}
          size="lg"
          fixedWidth
          color="black"
          onMouseOver={updateHover}
        />
      </span>
      {hover ? <YourOverlayComponent /> : null}
    </div>
  );

Очевидно, вам потребуется CSS для сделать так, чтобы оно появилось сверху, как в примере с gif.