javascript - 添加帮助弹出窗口

Question

我想添加有关我的 Web 应用程序上的某些项目的“帮助”信息。用户将光标移至该项目，帮助将显示在弹出框或小窗口中。有谁有一个很好的例子来展示 jquery 或 javascript 吗？

Answer 1

您的问题相当开放，但您可以有一个最初隐藏的 DIV，其内容和位置是动态的:

<div id="tooltip" style="display:none; position: absolute; z-index: 1000"></div>

z-index属性是为了保证DIV的可见性。当然，该值取决于是否有其他 z-index 较高的元素。

然后你可以创建几个 JS 函数:一个用于显示 div，另一个用于隐藏它:

function showTooltip (content, x, y) {
    $('#tooltip')
        .html(content)
        .css({left: x, top: y})
        .show();
}
function hideTooltip()
{
    $('#tooltip').hide();
}

这些功能将由鼠标事件触发，例如(mouseenter、mouseleave...)。 当然，DIV 的美观可以通过 CSS 进行调整。