Question

我正在使用此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>

Answer 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
    }
});

如果您的工具提示太大，您可以在-40字段bottom之后使用my进一步抵消您的锚点：

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

Answer 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
});

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

2 个答案: