Show tooltip at top using jquery

StackOverflow https://stackoverflow.com/questions/23305236

题

I am using this jquery tooltip to show the description for my link buttons. 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/

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>
有帮助吗？

解决方案

See this link: http://api.jqueryui.com/tooltip/#option-position

And in action here (based on EyasSH answer)

$( 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:

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

其他提示

Use the position property when declaring the tooltip.

$( ... ).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 和 归因
不隶属于 StackOverflow
scroll top