jQuery UI tooltip hover test
Attempting to keep the tooltip open while I have my mouse over the tooltip or the target element.
HTML
<body>
<div>
<a class="target">Hover over me!</a>
<a class="target">Hover over me too!</a>
</div>
</body>
CSS
#dng {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
font-size:8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
JavaScript
$('.target').tooltip({
items: 'a.target',
content: '<table id="dng"><tr><th>Company</th><th>Contact</th><th>Country</th></tr><tr><td>AlfredsFutterkiste</td><td>MariaAnders</td><td>Germany</td></tr><tr><td>CentrocomercialMoctezuma</td><td>FranciscoChang</td><td>Mexico</td></tr><tr><td>ErnstHandel</td><td>RolandMendel</td><td>Austria</td></tr><tr><td>IslandTrading</td><td>HelenBennett</td><td>UK</td></tr><tr><td>LaughingBacchusWinecellars</td><td>YoshiTannamuri</td><td>Canada</td></tr><tr><td>MagazziniAlimentariRiuniti</td><td>GiovanniRovelli</td><td>Italy</td></tr></table>',
show: null, // show immediately
open: function(event, ui)
{
if (typeof(event.originalEvent) === 'undefined')
{
return false;
}
var $id = $(ui.tooltip).attr('id');
// close any lingering tooltips
// ajax function to pull in data and add it to the tooltip goes here
},
close: function(event, ui)
{
ui.tooltip.hover(function()
{
$(this).stop(true).fadeTo(400, 1);
},
function()
{
$(this).fadeOut('400', function()
{
$(this).remove();
});
});
}
});