Confirm prompt dialog with qTip2?

Question

So, I'm trying to create a small confirmation dialog (inline, toopltip) when the user clicks the delete button.

I guess it looks like this

(but with a little text and OK and Cancel buttons). But I'm not here to ask how to style it.

I would prefer to use qTip2 as a plugin for the job, but if you have a better alternative, I would go for it too.

So, how could I make a tooltip with some interaction elements and only close it if it loses focus or the close button is pressed. Also - the delete button is loaded by Ajax.

Any ideas?

Thank you world!

Answer 1

This is easy to do with qTip2 . I will give you a start because see my demo

Result

HTML

<button id="gear">Gear</button> <div style="display:none;" id="menu"> <div class="menuitem">Rename</div><br> <div class="menuitem">Duplicate</div><br> <div class="menuitem">Delete</div><br> </div> 

CSS

 #gear { margin:100px; } .menuitem { padding-left: 10px; padding-right: 10px; font-size: 9px; margin-bottom: 3px; width: 75px; } 

Javascript

 $(function() { $("#gear").button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" }, text: false }).qtip({ content: { text: $('#menu') }, show: { event: 'click', solo: true, modal: true }, style: { classes: 'ui-tooltip-dark ui-tooltip-shadow' }, position: { my: 'top center', at: 'bottom center', } }); $(".menuitem").button().click(function(){ alert($(this).text()); }); });​ 

Please read the qTip2 Documentation and jQuery UI Documentation to better adapt to your needs.