添加帮助弹出窗口

Question

我想在我的网络应用程序中添加有关某些项目的“帮助”信息。用户将光标移动到该项目，帮助将显示在弹出框或小窗口中。有没有人有一个很好的例子在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();
}

这些功能将由鼠标事件触发，例如（mousenter，mouseleave，...）。 当然，DIV的美学可以通过CSS进行调整。

Answer 2

以下是JQuery工具提示插件列表：

• tipsy
• qTip2
• TipTip
• PowerTip
• clueTip

Answer 3

这也是为新用户创建游览的好插件

jquery-joyride