如何使游標工具提示不會離開螢屏

我正在處理一個彈出框，當游標懸停在元素上時，它會顯示一些遠離元素的文本。你可以在這里看到一個簡化的演示：

uj5u.com熱心網友回復：

可悲的是，我不相信只有 CSS 可以做到這一點。但是，通過處理您的小提琴，我設法添加了您想要的功能。

我采取的方法只是包含對容器的參考，并檢查彈出視窗的位置和大小是否在容器的 BoundingClientRect 內。

這是 popupShow 函式的更新代碼：

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';
}

如您所見，我還編輯了彈出視窗以使用“可見性：隱藏”而不是“顯示：無”。這是因為如果顯示設定為“無”，我們將無法獲得他的尺寸（不過可能有解決方法）。

嘗試查看更新的小提琴并告訴我您的想法。

我已經將一個圓圈向下推了一點，因為代碼當前不檢查彈出視窗的填充，所以它有點溢位（幾個像素）。

uj5u.com熱心網友回復：

這是基于象限的，簡單計算我們是否超過 50% 的寬度和/或高度，然后交換樣式以使用右側或底部。這不關心彈出視窗的內容，不需要測量。

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>

標籤：javascript html css

上一篇：使用JavaScript中的Reduce方法和擴展運算子對物件陣列進行變異

下一篇：串列項小于3時出現索引錯誤