使用 jquery 在顶部显示工具提示答案

【问题标题】：Show tooltip at top using jquery使用 jquery 在顶部显示工具提示
【发布时间】：2014-04-26 09:13:40
【问题描述】：

我正在使用这个 jquery 工具提示来显示我的链接按钮的描述。但是此工具提示显示在底部，如何在链接按钮的顶部显示工具提示。

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>

【问题讨论】：

标签： javascript jquery asp.net jquery-tooltip jquery-ui-tooltip

【解决方案1】：

查看此链接：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 进一步偏移您的锚点：

$( 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
    }
});

【讨论】：

我们都同意jQuery UI的工具提示位置的界面很糟糕

【解决方案2】：

在声明工具提示时使用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
});

【讨论】：