如何在Divi中精准定位特定元素旁的可点击Tooltip？

一、HTML结构（Divi代码模块中插入） #

给引用编号添加ARIA无障碍属性，关联对应的Tooltip容器：

<!-- 引用标记 -->
<span class="citation-ref" aria-describedby="tooltip-1" role="button" tabindex="0">[1]</span>

<!-- Tooltip内容容器 -->
<div id="tooltip-1" role="tooltip" class="citation-tooltip">
  <p>张三, 李四. 学术论文标题[J]. 某某期刊, 2024, 30(2): 123-130.</p>
</div>

注意：每个引用对应唯一的aria-describedby值和Tooltip的id，批量引用可通过循环生成（比如结合自定义字段）

二、CSS样式（添加到Divi自定义CSS） #

设置Tooltip的基础样式和定位参考，匹配NCBI风格：

.citation-ref {
  cursor: pointer;
  color: #0066cc;
  position: relative; /* 作为Tooltip的定位基准 */
}

.citation-tooltip {
  display: none;
  position: absolute;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 10px 15px;
  max-width: 320px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 99999;
  font-size: 14px;
  line-height: 1.5;
}

/* 添加左侧箭头，增强视觉指向性 */
.citation-tooltip::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -8px;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-right-color: #ffffff;
}

三、jQuery定位逻辑（添加到Divi页脚代码） #

通过获取引用元素的实时位置，计算Tooltip的精准坐标，解决像素偏移问题：

jQuery(document).ready(function($) {
  // 悬停触发Tooltip
  $('.citation-ref').hover(function() {
    var $ref = $(this);
    var $tooltip = $('#' + $ref.attr('aria-describedby'));
    
    // 获取引用元素的位置与尺寸
    const refOffset = $ref.offset();
    const refWidth = $ref.outerWidth();
    const refHeight = $ref.outerHeight();
    const tooltipHeight = $tooltip.outerHeight();
    
    // 计算Tooltip位置：右侧8px间距，垂直居中对齐引用标记
    const tooltipTop = refOffset.top + (refHeight / 2) - (tooltipHeight / 2);
    const tooltipLeft = refOffset.left + refWidth + 8;
    
    // 应用位置并显示
    $tooltip.css({
      top: `${tooltipTop}px`,
      left: `${tooltipLeft}px`
    }).fadeIn(200);
  }, function() {
    // 隐藏Tooltip
    $('#' + $(this).attr('aria-describedby')).fadeOut(100);
  });

  // 支持键盘操作（无障碍要求）
  $('.citation-ref').on('focus', function() {
    $(this).trigger('mouseenter');
  }).on('blur', function() {
    $(this).trigger('mouseleave');
  });
});

四、关键说明 #

1. ARIA属性作用：aria-describedby建立引用标记与Tooltip的关联，role="tooltip"告知屏幕阅读器元素类型，tabindex和role="button"确保键盘用户可访问，符合无障碍标准。
2. 精准定位原理：通过offset()获取引用元素的绝对位置，结合元素尺寸计算Tooltip的垂直居中与水平偏移，避免固定像素值导致的适配问题。
3. Divi集成方式：HTML用代码模块插入到对应段落中，CSS添加到「Divi主题选项 > 自定义CSS」，jQuery添加到「Divi主题选项 > 集成 > 页脚」区域。

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