Tips for preventing cursor tooltips from going off the screen

Question

Tips for preventing cursor tooltips from going off the screen

I've been working on creating a popup box that displays text positioned away from an element when the cursor hovers over it. Check out a simplified demo here.

Currently, the popup box collapses when it gets close to the bounding box. I'd like it to appear at the bottom-left (if it overflows to the right) or top-left (if it overflows to the bottom and right) of the hovered element's position if it exceeds the boundaries.

The text and position displayed are dynamically generated, meaning I won't know them in advance.

My current solution involves using Javascript:

Retrieve the text to be displayed. Calculate the width of the text by multiplying the number of characters by 0.25em.
Determine the total width of the displayed text + padding (left and right), referred to as textLength. This sets the popup's width to ensure all text fits on one line.
If the cursor's x position + textLength is greater than the box width, shift the position of the popup box to the left by subtracting textLength and some distance from the element.
Repeat the same check for the y position. If the cursor position + line height (1em) + bottom padding exceeds the box height, adjust the y position accordingly.

This solution works, but I'm interested in exploring more efficient alternatives that don't involve character counting. Is there a more elegant way to achieve this, perhaps using CSS only without Javascript?

https://i.sstatic.net/81xhx.png

javascript html css

Answer 1

Answer №1

Unfortunately, it seems that accomplishing this task with CSS alone is not possible. However, after some experimentation with your fiddle, I was able to implement the desired functionality.

My approach involved referencing the container and verifying whether the popup's position and size fell within the container's BoundingClientRect.

Here is the revised code for the popupShow function:

const showPopup = (top, left, text, container) => {
    popup.textContent = text;
  
  const containerBCR = container.getBoundingClientRect();
  const popupBCR = popup.getBoundingClientRect();
  const popupWidth = popupBCR.width,
        popupHeight = popupBCR.height;
  
  let popupTop = top + 20,
        popupLeft = left + 20,
      newPopupWidth;
  
  console.log("height: ", popupHeight);
  console.log("top: ", top);
  console.log("bottomPopup: ", top + 20 + popupHeight);
  console.log("bottomBoundary", containerBCR.bottom);
  
  if (left + 20 + popupWidth > containerBCR.right) {
    popupLeft = left - popupWidth;
    
    if (popupLeft < containerBCR.left) {
        popupLeft = containerBCR.left;
      newPopupWidth = left - containerBCR.left;
    }
  }
  
  if (top + 20 + popupHeight > containerBCR.bottom) {
    popupTop = top - popupHeight;
    
    if (popupTop < containerBCR.top) {
        popupTop = containerBCR.top;
    }
  }
  
  popup.style.top = popupTop + "px";
  popup.style.left = popupLeft + "px";
  popup.style.width = newPopupWidth;
  popup.style.visibility = 'visible';
}

Additionally, I updated the popup to utilize "visibility: hidden" instead of "display: none" to ensure we can still access its size when needed.

Feel free to review the revised fiddle and share your thoughts.

I made a minor adjustment to push one circle slightly downwards because the current code does not account for the popup's padding, causing it to overflow slightly (by a few pixels).

Answer 2

Unfortunately, it seems that accomplishing this task with CSS alone is not possible. However, after some experimentation with your fiddle, I was able to implement the desired functionality.

My approach involved referencing the container and verifying whether the popup's position and size fell within the container's BoundingClientRect.

Here is the revised code for the popupShow function:

const showPopup = (top, left, text, container) => {
    popup.textContent = text;
  
  const containerBCR = container.getBoundingClientRect();
  const popupBCR = popup.getBoundingClientRect();
  const popupWidth = popupBCR.width,
        popupHeight = popupBCR.height;
  
  let popupTop = top + 20,
        popupLeft = left + 20,
      newPopupWidth;
  
  console.log("height: ", popupHeight);
  console.log("top: ", top);
  console.log("bottomPopup: ", top + 20 + popupHeight);
  console.log("bottomBoundary", containerBCR.bottom);
  
  if (left + 20 + popupWidth > containerBCR.right) {
    popupLeft = left - popupWidth;
    
    if (popupLeft < containerBCR.left) {
        popupLeft = containerBCR.left;
      newPopupWidth = left - containerBCR.left;
    }
  }
  
  if (top + 20 + popupHeight > containerBCR.bottom) {
    popupTop = top - popupHeight;
    
    if (popupTop < containerBCR.top) {
        popupTop = containerBCR.top;
    }
  }
  
  popup.style.top = popupTop + "px";
  popup.style.left = popupLeft + "px";
  popup.style.width = newPopupWidth;
  popup.style.visibility = 'visible';
}

Additionally, I updated the popup to utilize "visibility: hidden" instead of "display: none" to ensure we can still access its size when needed.

Feel free to review the revised fiddle and share your thoughts.

I made a minor adjustment to push one circle slightly downwards because the current code does not account for the popup's padding, causing it to overflow slightly (by a few pixels).

Answer 3

Answer №2

This approach relies on dividing the element into quadrants and determining if it exceeds 50% width and/or height. It then switches the style to utilize the right or bottom position accordingly. The method is indifferent to the popup's content, eliminating the need for precise measurements.

const popup = document.getElementById("pop-up")

const parsePx = (px) => parseFloat(px.slice(0, -2))

const showPopup = (text, position) => {
  popup.textContent = text;
  popup.style.top = position.top;
  popup.style.left = position.left;
  popup.style.right = position.right;
  popup.style.bottom = position.bottom;
  popup.style.display = 'inline-block';
}

const hidePopup = () => {
  popup.style.display = 'none';
}

const circles = document.querySelectorAll(".red-circle")
circles.forEach(el => el.addEventListener('mouseover', (e) => {

  const hoveredEl = e.target;

  const textContent = hoveredEl.getAttribute('data-content');
  
  //get absolute position of elements
  let elBounds = hoveredEl.getBoundingClientRect();
    
  //get absolute position of parent;
  let ctBounds = popup.parentElement.getBoundingClientRect();
    
  //calculate relative positions
  let left =  elBounds.left - ctBounds.left + (elBounds.width / 2), 
    top = elBounds.top - ctBounds.top + (elBounds.height / 2),
    width = ctBounds.width,
    height = ctBounds.height

  //prepare position settings
  let position = { left: "auto", top: "auto", bottom: "auto", right: "auto" }
  
  //calculate if we're over 50% of box size
  if(top>ctBounds.height/2) position.bottom = ctBounds.height - top + 20 + 'px'; else position.top = top + 20 + 'px';
  if(left>ctBounds.width/2) position.right = ctBounds.width - left + 20 + 'px'; else position.left = left + 20 + 'px';
  
  showPopup(textContent, position);
  
}))

circles.forEach(el => el.addEventListener('mouseout', (e) => { hidePopup() }))

.container {  width: 200px;  height: 200px; border: 1px solid black;  position: relative;}
.red-circle { border-radius: 50%;  background: red;  width: 20px;  height: 20px;  position: absolute;}
#pop-up {  background-color: #EFEFEF;  padding: 0.25em;  position: absolute;}

<div class="container">
  <div style="top:20px;left:20px;" class="red-circle" data-content="This is a red circle"></div>
  <div style="top:10px;left:150px;" class="red-circle" data-content="This is the top-right red circle"></div>
  <div style="top:140px;left:150px;" class="red-circle" data-content="This is the bottom-right red circle"></div>
  <div style="top:140px;left:15px;" class="red-circle" data-content="This is the bottom-left red circle"></div>
  <span style="display:hidden" id="pop-up"></span>
</div>

Answer 4

This approach relies on dividing the element into quadrants and determining if it exceeds 50% width and/or height. It then switches the style to utilize the right or bottom position accordingly. The method is indifferent to the popup's content, eliminating the need for precise measurements.

const popup = document.getElementById("pop-up")

const parsePx = (px) => parseFloat(px.slice(0, -2))

const showPopup = (text, position) => {
  popup.textContent = text;
  popup.style.top = position.top;
  popup.style.left = position.left;
  popup.style.right = position.right;
  popup.style.bottom = position.bottom;
  popup.style.display = 'inline-block';
}

const hidePopup = () => {
  popup.style.display = 'none';
}

const circles = document.querySelectorAll(".red-circle")
circles.forEach(el => el.addEventListener('mouseover', (e) => {

  const hoveredEl = e.target;

  const textContent = hoveredEl.getAttribute('data-content');
  
  //get absolute position of elements
  let elBounds = hoveredEl.getBoundingClientRect();
    
  //get absolute position of parent;
  let ctBounds = popup.parentElement.getBoundingClientRect();
    
  //calculate relative positions
  let left =  elBounds.left - ctBounds.left + (elBounds.width / 2), 
    top = elBounds.top - ctBounds.top + (elBounds.height / 2),
    width = ctBounds.width,
    height = ctBounds.height

  //prepare position settings
  let position = { left: "auto", top: "auto", bottom: "auto", right: "auto" }
  
  //calculate if we're over 50% of box size
  if(top>ctBounds.height/2) position.bottom = ctBounds.height - top + 20 + 'px'; else position.top = top + 20 + 'px';
  if(left>ctBounds.width/2) position.right = ctBounds.width - left + 20 + 'px'; else position.left = left + 20 + 'px';
  
  showPopup(textContent, position);
  
}))

circles.forEach(el => el.addEventListener('mouseout', (e) => { hidePopup() }))

.container {  width: 200px;  height: 200px; border: 1px solid black;  position: relative;}
.red-circle { border-radius: 50%;  background: red;  width: 20px;  height: 20px;  position: absolute;}
#pop-up {  background-color: #EFEFEF;  padding: 0.25em;  position: absolute;}

<div class="container">
  <div style="top:20px;left:20px;" class="red-circle" data-content="This is a red circle"></div>
  <div style="top:10px;left:150px;" class="red-circle" data-content="This is the top-right red circle"></div>
  <div style="top:140px;left:150px;" class="red-circle" data-content="This is the bottom-right red circle"></div>
  <div style="top:140px;left:15px;" class="red-circle" data-content="This is the bottom-left red circle"></div>
  <span style="display:hidden" id="pop-up"></span>
</div>

Tips for preventing cursor tooltips from going off the screen

Answer №1

Answer №2

Similar questions

Could there be a coding issue stopping <div class="rating"> from aligning more centrally along the horizontal axis on the screen?

The navigation bar and footer are not utilizing the entire width of the browser

Acquire the value of ant-design Select dropdown upon hover

Element that hovers and floats

Ways to ensure that v-model does not become "true" or "false" in an input checkbox using Vue

What method is the most effective for retrieving the prior slug name in NextJS?

Creating a mapping in Node.js to write to a serial port and then retrieve the

Show angular variable data in a table based on their index

The text exceeds the width of the paragraph

Retrieving Data Attribute From Form Using Python Flask

The fascinating CSS Circle interaction on mouse click or hover

Troubleshooting issues with parsing JSON responses in AngularJS

Searching through a JSON object on a Laravel web page using JavaScript or AJAX for live filtering purposes

Why can't we use percentages to change the max-height property in JavaScript?

Personalized Firefox Scrollbar - Rounded Corners

Tips for creating a responsive fixed div/nav that adjusts its size based on the container it is placed within

How to perfectly align a full-width div with a div of specific width

Can HTML Elements be used within a Contenteditable section?

The function stringByEvaluatingJavaScriptFromString is failing to execute

What could be causing React onclick events to not trigger when wrapped within a Vue application? (No additional libraries)