使用JavaScript/jQuery实现悬停div左上角2px区域触发tooltip功能

核心思路 #

有两种常用实现方式可满足需求：

• 实时计算鼠标在目标div内的相对坐标，判断是否落在左上角0~2px的横、纵向范围内，无需额外插入DOM节点
• 在目标div内插入一个2px*2px的透明触发节点，直接绑定悬停事件，逻辑更简单，多元素批量处理场景下更易维护

原生JavaScript实现（坐标判断方案） #

无需修改现有HTML结构，直接绑定事件即可：

// 替换为你的目标div选择器
const targetDiv = document.querySelector('.target-div')
// 初始化tooltip元素，也可提前写在HTML中
const tooltip = document.createElement('div')
tooltip.style.cssText = `
  position: absolute;
  display: none;
  padding: 4px 8px;
  background: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none;
  z-index: 9999;
`
document.body.appendChild(tooltip)

// 悬停状态标记，避免重复触发逻辑
let isHoverActive = false

// 监听鼠标移动判断坐标
targetDiv.addEventListener('mousemove', (e) => {
  const offsetX = e.offsetX
  const offsetY = e.offsetY
  // 判断是否在左上角2px*2px区域内
  if (offsetX <= 2 && offsetY <= 2) {
    if (!isHoverActive) {
      isHoverActive = true
      // 显示字母L
      targetDiv.dataset.showL = 'true'
      // 显示tooltip，可自定义内容
      tooltip.textContent = '自定义tooltip内容'
      tooltip.style.left = `${e.pageX + 8}px`
      tooltip.style.top = `${e.pageY + 8}px`
      tooltip.style.display = 'block'
      // 此处可添加你需要触发的自定义业务逻辑
    }
  } else {
    if (isHoverActive) {
      isHoverActive = false
      // 隐藏字母L和tooltip
      targetDiv.dataset.showL = 'false'
      tooltip.style.display = 'none'
    }
  }
})

// 鼠标移出div时直接重置状态
targetDiv.addEventListener('mouseleave', () => {
  isHoverActive = false
  targetDiv.dataset.showL = 'false'
  tooltip.style.display = 'none'
})

配套CSS用于显示字母L：

.target-div {
  position: relative;
  /* 保留你原有div的样式 */
}
/* 悬停时显示字母L */
.target-div[data-show-l="true"]::before {
  content: 'L';
  position: absolute;
  top: 0;
  left: 0;
  font-size: 12px;
  color: #ff0000;
  /* 调整偏移量控制L的显示位置 */
  transform: translate(0, -110%);
  pointer-events: none;
}

jQuery实现（插入触发节点方案） #

适合需要批量绑定多个div的场景，无需坐标计算：
首先修改HTML结构，在目标div内插入触发节点：

<div class="target-div">
  <span class="hover-trigger"></span>
  <!-- 原有div内容 -->
</div>

配套CSS：

.target-div {
  position: relative;
}
/* 2px*2px的透明触发区域 */
.hover-trigger {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  background: transparent;
  z-index: 10;
}
/* 显示字母L的样式 */
.target-div.show-l::before {
  content: 'L';
  position: absolute;
  top: 0;
  left: 0;
  font-size: 12px;
  color: #ff0000;
  transform: translate(0, -110%);
  pointer-events: none;
}
/* tooltip样式 */
.custom-tooltip {
  position: absolute;
  display: none;
  padding: 4px 8px;
  background: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none;
  z-index: 9999;
}

jQuery逻辑代码：

// 插入tooltip元素
const $tooltip = $('<div class="custom-tooltip"></div>').appendTo('body')

// 绑定触发区域悬停事件
$('.hover-trigger').on('mouseenter', function(e) {
  const $parentDiv = $(this).closest('.target-div')
  $parentDiv.addClass('show-l')
  $tooltip.text('自定义tooltip内容').css({
    left: e.pageX + 8 + 'px',
    top: e.pageY + 8 + 'px'
  }).show()
  // 此处添加自定义触发逻辑
})

$('.hover-trigger').on('mouseleave', function() {
  const $parentDiv = $(this).closest('.target-div')
  $parentDiv.removeClass('show-l')
  $tooltip.hide()
})

调整说明 #

• 可自行修改CSS中字母L的颜色、大小、偏移量适配你的页面样式
• tooltip的内容、样式、定位偏移都可以根据需求自定义调整
• 如果需要触发区域更精准，可给触发节点加半透明背景调试，调试完成后再改回透明即可

内容的提问来源于stack exchange，提问作者Aab B