I want to implement a popup as shown on Google maps, to rate restaurants (after search). The user hovers over the overall rating, and then a popup is shown on whi开发者_如何学Pythonch user can rate. I am using jquery. The popup should disappear once focus is lost from the popup. So, basically I want to know how to display such a popup ?
jquery tooltip is a good one
Its as simple as:
$("[title]").tooltip();
// or
// $(".trigger").tooltip({ position: "bottom left", opacity: 0.7});
Even customize the html inside the tooltip (from their example page here):
<!-- trigger element. a regular workable link -->
<a id="download_now">Download now</a>
<!-- tooltip element -->
<div class="tooltip">
<img src="http://static.flowplayer.org/img/title/eye.png" alt="Flying screens"
style="float:left;margin:0 15px 20px 0" />
<table style="margin:0">
<tr>
<td class="label">File</td>
<td>flowplayer-3.2.7.zip</td>
</tr>
<tr>
<td class="label">Date</td>
<td>2011-03-03</td>
</tr>
<tr>
<td class="label">Size</td>
<td>112 kB</td>
</tr>
<tr>
<td class="label">OS</td>
<td>all</td>
</tr>
</table>
<a href="/3.2/">What's new in 3.2</a>
</div>
Then:
$("#download_now").tooltip({ effect: 'slide'});
精彩评论