如何实现鼠标悬停时向下显示Tooltip

以下是你需要排查和调整的几个关键点：

1. 定位计算逻辑（JavaScript部分） #

Tooltip使用position: absolute，它的位置由JS动态计算决定：

• 原逻辑应该是把Tooltip的top设为鼠标Y坐标 - Tooltip总高度，让它显示在指针上方。你需要把这个计算改成鼠标Y坐标 + 指针高度（比如16px），让Tooltip贴在指针下方。
• 保持left方向的计算逻辑不变，确保Tooltip和鼠标指针水平对齐。

2. 箭头伪元素的样式切换 #

你的CSS里已经定义了.tooltip_b类来处理不同方向的箭头，需要对应调整：

• 默认的&:before箭头是给Tooltip在上方时用的（top:99%，指向下方）。当Tooltip移到下方后，要给#hbox_tooltip添加.tooltip_b类，启用对应的箭头样式：
  • 箭头位置改为top:1%，指向Tooltip上方（也就是鼠标指针的位置）
  • 旋转角度和阴影的调整也会自动生效，适配新的方向

3. 视口边界适配（可选） #

调整后要测试极端场景：

• 如果鼠标靠近页面底部，Tooltip显示在下方可能会超出视口。需要添加判断逻辑，当检测到Tooltip会溢出时，自动切换回上方显示，避免内容被截断。

你提供的CSS代码参考 #

@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@-moz-keyframes fadeIn { 
    0% { opacity: 0;} 
    100% { opacity: 1;}
}
@-o-keyframes fadeIn { 
    0% { opacity: 0;} 
    100% { opacity: 1;}
}

#hbox_tooltip {

    @include box-sizing(border-box);
    width: 480px;
    max-height: 206px;
    padding: 0 20px 16px 20px;
    background-color: #FFFFFF;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.10), 0 2px 4px 1px rgba(0, 0, 0, 0.18);
    border-radius: 4px;
    z-index: $b-z-implicit-hover;
    position: absolute;
    display: none;

    &.fadeIn {
        -webkit-animation: fadeIn 0.2s linear;
        -moz-animation: fadeIn 0.2s linear;
        -o-animation: fadeIn 0.2s linear;
        animation: fadeIn 0.2s linear;
    }

    .entity_title {
        margin-top: 20px;
    }

    .entity_image {
        margin: 16px 0 0 16px;
        float: right;
    }

    .entity_description {
        margin: 16px 0 0 0;
        line-height: 17px;
    }

    .entity_source {
        margin: 12px 0 20px 0;
        float: left;
        display: block;
    }

    &:hover, &:focus {
        cursor: pointer;
    }

    &:before {
        @include box-sizing(border-box);
        content: '';
        position: absolute;
        top: 99%;
        left: 33%;
        width: 0;
        height: 0;
        margin-left: -10px;
        border: 10px solid #FFFFFF;
        box-shadow: -4px 4px 1px -1px rgba(0,0,0,.18);
        border-color: transparent transparent white white;
        transform-origin: 0 0;
        transform: rotate(-45deg);
    }

    &.tooltip_b:before {
        top: 1%;
        transform: rotate(-225deg);
        box-shadow: -2px 2px 2px -2px rgba(0,0,0,.18);
        margin-left: 10px;
    }
}

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