Rebind event to active tooltip
HTML
<script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script>
<div id='trigger'>MouseOver Me!</div>
<div class='tooltip'>
This is the tooltip.
</div>
<div class='button' id='unbind'>Unbind</div>
<div class='button' id='rebind'>Rebind?</div>
CSS
#trigger{
padding:5px;
border: 1px solid green;
text-align: center;
margin: 10px;
width: 200px;
top: 50px;
left: 20px;
}
.tooltip {
display:none;
height:20px;
padding:5px;
width:200px;
border: 1px solid blue;
background: white;
}
.button {
text-align: center;
height: 20px;
padding: 5px;
margin: 10px;
width: 100px;
border: 1px solid silver;
}
JavaScript
$(document).ready(function() {
$('#trigger').tooltip({
position: 'bottom center',
events: {
def: "mouseover click,mouseout",
input: "focus,blur",
widget: "focus mouseover,blur mouseout",
tooltip: "mouseover,mouseout"
}
});
$('#unbind').click(function(){
$('#trigger').tooltip("option", "content", "test");
alert('123');
});
$('#rebind').click(function(){
alert('attempting to rebind mouseover event');
$("#trigger").data("tooltip").getTrigger().bind('mouseover');
// this doesn't work
$(".tooltip").text('MouseOver Me :(');
});
});