Tooltip

export default function Component() {
  return (
    <div id="app">
  <div className="reference relative">
    <p className="main-title">
      Location
      <span style={{ fontStyle: "italic", color: "#226630" }} className="hover-card"
        >Paris</span
      >, France
    </p>
    <div className="card absolute hidden">
      <div className="cloud"></div>
      <div className="cloud"></div>
      <div className="cloud"></div>
      <div className="cloud"></div>
      <div className="relative inner-card">
        <div className="bg-map"></div>
        <div className="location absolute"></div>
        <div className="elements">
          <div className="description relative">
            <div className="blur-item absolute"></div>
            <span className="main-title">Paris</span>
            <p className="second-title">France</p>
          </div>
          <div className="details">
            <div className="peoples">
              <div className="people"></div>
              <div className="people"></div>
              <div className="people"></div>
            </div>
            <div className="action"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  );
}