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

Display picture on webpage in 10 seconds

What are the steps to integrate my server-side PHP code into this form wizard?

The act of exporting components from the main index file allows for

Displaying Child Component in Parent Component After Click Event on Another Child Component: How to Implement Angular Parent/Children Click Events

Converting multi-dimensional array into a structured table format

What is the best way to expand an object without including any null values?

What is the best way to identify identical companies, consolidate them into a single entity, and combine their weights for a more

Tips for verifying the presence of a 3D model from Spline API within the DOM using Next.js

Is there a way to simulate the change event on a react-select component using react-testing-library?

"Hover over the image to see it enlarge and reveal text displayed on top using CSS3

A blank screen of errors pops up when attempting to update through a form

Alert displayed at the center of the browser when the value surpasses the specified number

Combining objects in JavaScript

Fetching data using JSONRequest sample code

What is the best way to prevent labels from floating to the top when in focus?

What is the process for locating and displaying a database in WordPress?

Tips for displaying a sub-menu upon hovering

Error encountered: Material-Table threw a TypeError stating that Object(...) was not recognized as a function within the module located at ../node_modules/@material-ui/pickers/dist/material-ui-p

What is the process for setting %20 to represent a space in URL parameters?

How do I create more space in Vitepress to prevent the text from feeling cramped and allow it to display in a larger area?