}
});
- $( "#info-link" ).hover(
- function( event ) {
- $("#more-info").popup( "open" );
- },
- function( event ) {
- $("#more-info").popup( "close" );
- }
- );
+ $( "#info-link" ).mouseover( function( event ) {
+ $("#more-info").popup( "open" );
+ });
});
</script>
<style type="text/css">
<div class="demo">
<div>
- <textarea>More info about me to the right -></textarea> <span id="info-link" class="ui-icon ui-icon-info" />
+ <textarea>More info about me to the right -></textarea> <span id="info-link" class="ui-icon ui-icon-info"></span>
+ <div id="more-info">This is some more info and there is even more info on <a href="#">this page</a>.</div>
</div>
- <div id="more-info">This is some more info</div>
</div>
<div class="demo-description">
});
}
- this._bind({
- focusout: function( event ) {
- // use a timer to allow click to clear it and letting that
- // handle the closing instead of opening again
- this.closeTimer = this._delay( function() {
- this.close( event );
- }, 100);
- },
- focusin: function( event ) {
- clearTimeout( this.closeTimer );
- }
- });
-
this._bind({
// TODO only triggered on element if it can receive focus
// bind to document instead?