Question

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 which 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 ?

Answer 1

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'});