我想在我的 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