Show tooltip at the top of link button

Question

I am using this jquery code to show tooltip for the linkbuttons in my master page. The tooltip is getting displayed below the link button and the problem is if the user navigates fast the menu disappears. So each time they have to come down slowly.

And is there is any way to show the tooltip at the top of the link button so that the user can navigate down quickly without having the menu items disappeared.

Code:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery- ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(document).tooltip();
    });
</script>
<style type="text/css">
    div.ui-tooltip
    {
        max-width: 100%;
        font-size: 14px;           
    }
</style>

HTML:

<li><a href="#" class="pureCssMenui">Department</a>
                                    <ul class="pureCssMenum">
                                        <li class="pureCssMenui"><a   class="pureCssMenui" href="Manufacturer.aspx" title="Contains list of Manufacturers">
                                            Manufacturer</a></li>
                                        <li class="pureCssMenui"><a class="pureCssMenui" href="Food & Beverages.aspx" title="Has informations on foods type manufacturing">
                                            Food & Beverage</a></li>
                                        <li class="pureCssMenui"><a class="pureCssMenui" href="Transport.aspx" title="Has transport cost across globe">
                                            Transportation</a></li>
                                    </ul>
                                </li>

Answer 1

Put options parameter in your tooltip().

$(document).tooltip({ position: { my: "bottom", at: "top" } });

Reference jQuery UI:

<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

Here's the JSFiddle code: http://jsfiddle.net/2gLm5/4/

If your browser is incompatible, just use a third-party library like Bootstrap