Preventing ReactJS tooltips from exceeding the boundaries of the screen

Question

Preventing ReactJS tooltips from exceeding the boundaries of the screen

Here is a simple demo showcasing blocks with tooltips that appear when hovered over. However, there seems to be an issue with the functionality.

The tooltip should ideally be displayed either from the left or right side of the block. To determine the size and position of the tooltip accurately, it needs to be displayed first. The calculation for positioning the tooltip can only be done after it is visible.

You can view the code on CodeSandbox here

// JavaScript code...

.block {
  // CSS styles...
}

.hover-block {
  // CSS styles...
}

.hidden {
  display: none;
}

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  
<div id="root"></div>

javascript html css reactjs

Answer 1

Answer №1

I managed to find a solution by modifying how the element is hidden: visibility:hidden was used instead of display:none

export default function HoveredBlock({ blockStyle }) {
  const [blockRect, setBlockRect] = useState();
  const [hoverRect, setHoverRect] = useState();
  const [showHover, setShowHover] = useState(false);

  const [coords, setCoords] = useState();

  const blockRef = useCallback((node) => {
    if (node) {
      setBlockRect(node.getBoundingClientRect());
    }
  }, []);

  const hoverRef = useCallback((node) => {
    if (node) {
      setHoverRect(node.getBoundingClientRect());
    }
  }, []);

  useEffect(() => {
    if (showHover) {
      console.log({ blockRect, hoverRect });
      const coords = calcCoords(blockRect, hoverRect);

      setCoords(coords);
    }
  }, [showHover, blockRect, hoverRect]);

  return (
    <>
      <div
        ref={blockRef}
        className="block"
        style={blockStyle}
        onMouseEnter={() => setShowHover(true)}
        onMouseLeave={() => setShowHover(false)}
      />
      <div
        ref={hoverRef}
        className={cx("hover-block", {
          hidden: !showHover || !coords
        })}
        style={{
          left: coords && coords.x,
          top: coords && coords.y
        }}
      ></div>
    </>
  );
}

.block {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  margin-left: 20%;
}

.hover-block {
  position: fixed;
  width: 100px;
  height: 100px;
  background-color: coral;
}

.hidden {
  visibility: hidden;
}

Answer 2

I managed to find a solution by modifying how the element is hidden: visibility:hidden was used instead of display:none

export default function HoveredBlock({ blockStyle }) {
  const [blockRect, setBlockRect] = useState();
  const [hoverRect, setHoverRect] = useState();
  const [showHover, setShowHover] = useState(false);

  const [coords, setCoords] = useState();

  const blockRef = useCallback((node) => {
    if (node) {
      setBlockRect(node.getBoundingClientRect());
    }
  }, []);

  const hoverRef = useCallback((node) => {
    if (node) {
      setHoverRect(node.getBoundingClientRect());
    }
  }, []);

  useEffect(() => {
    if (showHover) {
      console.log({ blockRect, hoverRect });
      const coords = calcCoords(blockRect, hoverRect);

      setCoords(coords);
    }
  }, [showHover, blockRect, hoverRect]);

  return (
    <>
      <div
        ref={blockRef}
        className="block"
        style={blockStyle}
        onMouseEnter={() => setShowHover(true)}
        onMouseLeave={() => setShowHover(false)}
      />
      <div
        ref={hoverRef}
        className={cx("hover-block", {
          hidden: !showHover || !coords
        })}
        style={{
          left: coords && coords.x,
          top: coords && coords.y
        }}
      ></div>
    </>
  );
}

.block {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  margin-left: 20%;
}

.hover-block {
  position: fixed;
  width: 100px;
  height: 100px;
  background-color: coral;
}

.hidden {
  visibility: hidden;
}

Preventing ReactJS tooltips from exceeding the boundaries of the screen

Answer №1

Similar questions

"Troubleshooting: Why isn't my jQuery AJAX POST request successfully sending data to

What is the proper way for AJAX to function in WordPress when there is no output function available?

"Clicking on the dropdown menu will consistently result in it collapsing

Start a new typescript project from scratch

Having issues with retrieving data using findOne or findById in Express and Node JS, receiving undefined values

Utilize the MaterialUI DataGrid to showcase nested object values in a visually appealing

Save the URLs of multiple images uploaded to Firebase in Firestore

Python (Selenium) - Guide on extracting and storing data from multiple pages into a single CSV file

The component <FormControl /> does not support the variant prop

Need help with styling for disabled autocomplete? Check out the attached image

Issues arise when Angular properties become undefined following the initialization or OnInit functions

What causes the discrepancy in results between the quoted printable encoding operation in JavaScript and Oracle?

Is there a way to verify if an email is already registered within a MERN stack application

Dealing with object properties that may not always be present in Vue.js template tags

Getter and Setter Implementation in Typescript without Using Classes

Display the outcome of a POST request on the webpage

Having trouble deleting a component from an array in React?

Is it possible to use JavaScript to forcefully transition a CSS keyframe animation to its end state?

The view of the Google map is filled with numerous rounded tiles

Bootstrap struggles to create panels of uniform size