jquery - How do i create a tooltip using qTip2 that is assigned at run time to page elements -
i'm trying have qtip2 bubble created not displayed @ load time. display under image clicked.
please advise best way this. (using qtip solve bubble going out of screen).
thanks
edit:
see problem http://jsfiddle.net/jnbpp/5/ (looking correct way this)
well need load on click, e.g.:
$('img[title]').live('click', function(event) { $(this).qtip({ overwrite: false, content: { text: $(this).attr('title') , }, position: { my: 'top center', at: 'bottom center', adjust : { screen : true } }, show: { event: event.type, ready: true, solo: true }, hide: 'unfocus', style: { classes: 'ui-tooltip-light' } }); });
check out fiddle: example
use
adjust : { screen : true }
to keep tooltip on screen.
here go. click
$('img[title]').live('click', function(event) { var content = $('#settings').clone(); $('input', content).val( $(this).width() ); $(this).qtip({ overwrite: false, content: { text: content, title: { text: ' ', button: true } }, position: { my: 'top center', // position top left... at: 'bottom center', // @ bottom right of... viewport: $(window) }, show: { event: event.type, ready: true, solo: true }, hide: 'unfocus', style: { classes: 'ui-tooltip-ajax ui-tooltip-light' } }); });
Comments
Post a Comment