ralphlobster
New Member
In a jQuery UI dialog I am displaying a list of choices (checkboxes). Each node in the list has a help icon at the end of it, on which a popup bubble with info will be shown on hover. HTML:\[code\]<div id="dialog" class="hidden"> <ul> <li><input type="checkbox" name="chk1"/> <label for="chk1">Node 1</label> <img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/24/Categories-system-help-icon.png" class="nodeTrigger" /> <div class="popup hidden"> <span class="bold">Node 1</span><br/> Some Long description of what Node 1 entails </div> </li> <li><input type="checkbox" name="chk2"/> <label for="chk2">Node 2</label> <img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/24/Categories-system-help-icon.png" class="nodeTrigger" /> <div class="popup hidden"> <span class="bold">Node 2</span><br/> Some Long description of what Node 2 entails </div> <ul> <li> <input type="checkbox" name="chk3"/> <label for="chk3">Node 3</label> <img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/24/Categories-system-help-icon.png" class="nodeTrigger" /> <div class="popup hidden"> <span class="bold">Node 3</span><br/> Some Long description of what Node 3 entails </div> </li> </ul> </li> </ul></div>\[/code\]CSS:\[code\]#dialog { position: relative; }.hidden { display: none;}.bold { font-weight: bold; }.popup { background-color: #dddddd; border: 1px solid #000000; width: 400px;}\[/code\]Javascript (in a jquery ready function):\[code\]$('img.nodeTrigger').hover( function(e){ var that = $(this); var position = that.position(); var popup = $(that.parent().find('div.popup').get(0)); var top = position.top - (popup.outerHeight() / 2.0) + (that.outerHeight() / 2.0); var left = position.left + that.outerWidth() + 5; popup.stop(true, true) .css({ 'position': 'absolute', 'top': top, 'left': left, 'z-index': 99999 }) .fadeIn('slow'); }, function(){ var popup = $(this).parent().find('div.popup'); popup.stop(true, true).fadeOut('slow'); });$('#dialog-trigger').click(function(e){ e.preventDefault(); $('#dialog').dialog({ width: 400, height: 300, modal: true, resizable: false, title: 'Choose some items', buttons: { 'Ok': function() { $(this).dialog('close'); } } });});\[/code\]You can see a basic example here:http://jsfiddle.net/YZpzN/6/My problem is that I cannot figure out how to allow the popup bubble to break out of the dialog. When the bubble is shown, it is contained inside the dialog, resulting in scrollbars. I need to it "break out", overlaying the dialog if necessary.