使用jquery在顶部显示工具提示
[英]Show tooltip at top using jquery
问题描述
I am using this jquery tooltip to show the description for my link buttons. 
我正在使用此jquery工具提示来显示我的链接按钮的说明。 But this tooltip is getting displayed at the bottom and how can I display the tooltip at the top of my link button. 但是这个工具提示会显示在底部，如何在链接按钮的顶部显示工具提示。
https://jqueryui.com/tooltip/ https://jqueryui.com/tooltip/
HTML: 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>
2 个解决方案
解决方案1
7 已采纳 2014-04-26 01:00:08
See this link: http://api.jqueryui.com/tooltip/#option-position 请看以下链接： http ： //api.jqueryui.com/tooltip/#option-position
And in action here (based on EyasSH answer) 并在这里采取行动（基于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
}
});
If your tooltip is too large you can offset your anchor further by using -40 after bottom in the my field: 如果您的工具提示太大，您可以在my字段bottom后面使用-40进一步偏移锚点：
$( 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
}
});
解决方案2
3 2014-04-26 00:51:16
Use the position property when declaring the tooltip. 在声明工具提示时使用position属性。
$( ... ).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
},
// other properties
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.