0

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

4

3 回答 3

2

您的问题很开放，但您可能有一个最初隐藏的 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 进行调整。

于 2012-08-16T15:57:08.140 回答
1

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

于 2012-08-16T15:57:55.180 回答
0

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

jquery-joyride

于 2012-08-16T16:10:41.440 回答