PowerTip Demo

A few examples of the jQuery PowerTip plugin in action.

by Sunny Sharma

HTML

<link rel="stylesheet" href="http://stevenbenner.github.com/jquery-powertip/styles/jquery.powertip.css">
<script src="http://stevenbenner.github.com/jquery-powertip/scripts/jquery.powertip.js"></script>
<table id="placement-examples">
    <tr>        <br/><br/><br/><br/>
     <td class="north-east"> North East </td>    </tr>
</table>

CSS

#placement-examples div {
    text-align: center;
}
#placement-examples input {
    background-color: #EEE;
    margin: 10px;
    padding: 10px 30px;
}
#placement-examples #east {
    margin-left: 200px;
}

#mousefollow-examples div {
    background-color: #EEE;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    padding: 50px 0;
}

#mouseon-examples div {
    background-color: #EEE;
    text-align: center;
    width: 200px;
    padding: 40px;
}

#api-examples input {
    background-color: #EEE;
    margin: 10px;
    padding: 10px 30px;
}

JavaScript

// placement examples

//$('#north-east').powerTip({
  //  placement: 'ne',
    //smartPlacement: true
//});
$('td.north-east').data('powertip', '<b>Full Day Leave</b>');


$('td.north-east').powerTip({
  placement: 'ne',
  smartPlacement: true
});