这很容易做到qTip2 http://craigsworks.com/projects/qtip2/。我会给你一个开始,为此请参阅我的DEMO http://jsfiddle.net/neysor/r9yfw/
Result
HTML
<button id="gear">Gear</button>
<div style="display:none;" id="menu">
<div class="menuitem">Rename</div><br>
<div class="menuitem">Duplicate</div><br>
<div class="menuitem">Delete</div><br>
</div>
CSS
#gear {
margin:100px;
}
.menuitem {
padding-left: 10px;
padding-right: 10px;
font-size: 9px;
margin-bottom: 3px;
width: 75px;
}
JavaScript
$(function() {
$("#gear").button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
},
text: false
}).qtip({
content: {
text: $('#menu')
},
show: {
event: 'click',
solo: true,
modal: true
},
style: {
classes: 'ui-tooltip-dark ui-tooltip-shadow'
},
position: {
my: 'top center',
at: 'bottom center',
}
});
$(".menuitem").button().click(function(){
alert($(this).text());
});
});
为了更好地适应您的需求,请阅读qTip2 文档 http://craigsworks.com/projects/qtip2/docs/和jQuery UI 文档 http://jqueryui.com/demos/.