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

Question

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

javascriptjqueryasp.netjquery-tooltipjquery-ui-tooltip

3

我是一名中文翻译，以下是关于IT技术方面的翻译内容。您需要使用此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>

- user3279082

2个回答

4

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

- EyasSH

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vitro · Accepted Answer

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

实际效果请参见此处（基于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
    }
});