gpt4 book ai didi

javascript - 使用 jquery 在顶部显示工具提示

转载 作者:行者123 更新时间:2023-12-01 02:05:34 24 4
gpt4 key购买 nike

我正在使用此 jquery 工具提示来显示链接按钮的说明。但此工具提示显示在底部,如何在链接按钮的顶部显示该工具提示。

https://jqueryui.com/tooltip/

HTML:

<html>
<head runat="server">
<title></title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function () {
$(document).tooltip({
position: {
my: "center bottom",
at: "center top",
},
});
});
</script>
<style type="text/css">
label
{
display: inline-block;
width: 5em;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<li><a href="#" class="pureCssMenui">Department</a>
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="WebForm.aspx" title="Contains list of Manufacturers">
Manufacturer</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="ToolTip.aspx" title="Contains list of jquery tooltip">
ToolTip</a></li>
</ul>
</li>
</table>
</div>
</form>
</body>
</html>

最佳答案

查看此链接:http://api.jqueryui.com/tooltip/#option-position

并在行动here (基于 EyasSH 答案)

$( document ).tooltip({
position: {
my: "center bottom", // the "anchor point" in the tooltip element
at: "center top", // the position of that anchor point relative to selected element
}
});

如果您的工具提示太大,您可以在 my 字段中的 bottom 之后使用 -40 进一步偏移 anchor :

$( document ).tooltip({
position: {
my: "center bottom-40", // the "anchor point" in the tooltip element
at: "center top", // the position of that anchor point relative to selected element
}
});

关于javascript - 使用 jquery 在顶部显示工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23305236/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com