添加帮助弹出窗口

Adding a help popup

本文关键字：窗口 帮助 添加      更新时间：2023-09-26

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

你的问题很开放，但你可能有一个最初隐藏的DIV，其内容和位置将是动态的：

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

z-index 属性用于确保 DIV 的可见性。当然，该值取决于您是否有其他具有更高 z 指数的元素。

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

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

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

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

  • 醉
  • q提示2
    • 提示
  • 提示
  • 电源提示
  • 线索提示

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

jquery-joyride

相关文章：