Question

我正在使用此jquery代码显示母版页中链接按钮的工具提示。工具提示将显示在链接按钮下方，问题是如果用户快速导航，菜单将消失。所以每次他们都要慢慢下来。

是否有任何方法可以在链接按钮的顶部显示工具提示，以便用户可以快速向下导航而不会使菜单项消失。

代码：

<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

将选项参数放入工具提示（）。

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

参考jQuery UI：

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

这是JSFiddle代码： http://jsfiddle.net/2gLm5/4/

如果您的浏览器不兼容，只需使用第三方库，如Bootstrap

在链接按钮顶部显示工具提示

1 个答案: