我说错了其实就是说要在1 没有 imgSrc 和 2有 imgSrc 但图片宽或高大于150px 和3 有imgSrc 但是图片加载失败文件错误的这3种情况下ToolTip的位置都是 tooltipstyleleft = eclientX + 10 + px;tooltipstyletop = eclientY + 10 + px;应该怎么改下面的代码？let selectedLabel = nu

let selectedLabel = null; let currentTooltip = null; let tooltipTimer = null; let fixedImgContainer = null;

labels.forEach((label) => { label.addEventListener("mouseover", (e) => { if (currentTooltip) { document.querySelector(".category-options-wrapper").removeChild(currentTooltip); clearTimeout(tooltipTimer); }

const tooltip = document.createElement("div");
tooltip.classList.add("tooltip");
tooltip.innerHTML = label.getAttribute("data-title");
const imgSrc = label.getAttribute("data-img");
if (imgSrc) {
  const img = new Image();
  img.src = imgSrc;
  img.onload = function() {
    // If image width or height is greater than 150px, show it in fixed position
    if (img.width > 150 || img.height > 150) {
      if (!fixedImgContainer) {
    
        fixedImgContainer = document.createElement("div");
        fixedImgContainer.classList.add("fixed-img-container");
        document.body.appendChild(fixedImgContainer);
      }
      const fixedImg = new Image();
      fixedImg.src = imgSrc;
      fixedImgContainer.innerHTML = ""; // Clear previous image
      fixedImgContainer.appendChild(fixedImg);
    } else {
      tooltip.appendChild(document.createElement("br"));
      tooltip.appendChild(img);
    }
  }
  img.onerror = function() {
    console.log("Error: Failed to load image '" + imgSrc + "'");
    if (!img.width || img.width > 150 || !img.height || img.height > 150) {
      tooltip.style.left = e.clientX + 10 + "px";
      tooltip.style.top = e.clientY + 10 + "px";
    } else {
      const wrapperRect = document.querySelector(".category-options-wrapper").getBoundingClientRect();
      const left = e.pageX - wrapperRect.left + 10;
      const top = e.pageY - wrapperRect.top + 10;
      tooltip.style.left = left + "px";
      tooltip.style.top = top + "px";
    }
  };
}
tooltip.style.maxWidth = "300px";
document.querySelector(".category-options-wrapper").appendChild(tooltip);

const tooltipWidth = tooltip.offsetWidth;
const tooltipHeight = tooltip.offsetHeight;
const mouseX = e.clientX;
const mouseY = e.clientY;
const wrapperRect = document.querySelector(".category-options-wrapper").getBoundingClientRect();

let left = mouseX - wrapperRect.left + 10;
let top = mouseY - wrapperRect.top + 10;

if (!imgSrc) {
  left = e.pageX + 10;
  top = e.pageY + 10;
} else if (left + tooltipWidth > wrapperRect.left + wrapperRect.width) {
  // tooltip 超出右侧边界
  left = wrapperRect.left + wrapperRect.width - tooltipWidth;
}

if (top + tooltipHeight > wrapperRect.top + wrapperRect.height) {
  // tooltip 超出下方边界
  top = wrapperRect.top + wrapperRect.height - tooltipHeight;
}

tooltip.style.left = left + "px";
tooltip.style.top = top + "px";

tooltip.addEventListener("mousemove", () => {
  clearTimeout(tooltipTimer);
});

tooltip.addEventListener("mouseout", () => {
  tooltipTimer = setTimeout(() => {
    document.querySelector(".category-options-wrapper").removeChild(tooltip);
    currentTooltip = null;
    // 如果该 label 元素是当前选中的元素，则不还原其背景颜色
    if (label == selectedLabel) {
      label.style.backgroundColor = "";
    }

  // Remove fixed image container if it exists
  if (fixedImgContainer) {
    document.body.removeChild(fixedImgContainer);
    fixedImgContainer = null;
  }
  }, 500);
});

currentTooltip = tooltip;
// 如果当前已有选中的 label 元素，则将其背景颜色还原
if (selectedLabel && label !== selectedLabel) {
  selectedLabel.style.backgroundColor = "";
}
// 将当前 label 元素设置为选中，并将其背景颜色设置为 '#40b40d'
selectedLabel = label;
selectedLabel.style.backgroundColor = "rgba(64, 180, 13, 0.6)";

});

label.addEventListener("mouseleave", () => { if (currentTooltip) { tooltipTimer = setTimeout(() => { document.querySelector(".category-options-wrapper").removeChild(currentTooltip); currentTooltip = null; // 如果该 label 元素是当前选中的元素，则不还原其背景颜色 if (label == selectedLabel) { label.style.backgroundColor = ""; }

  // Remove fixed image container if it exists
  if (fixedImgContainer) {
    document.body.removeChild(fixedImgContainer);
    fixedImgContainer = null;
  }
  }, 2000);
}

}); })