[英]Show tooltip at the top of link button
我正在使用此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>
将options参数放入您的tooltip()中。
$(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之类的第三方库
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.