jQuery ui dialog add a help icon in the titlebar

Question

I'd like to add a help icon in the title bar (right corner) of the JQuery UI dialog box.

I started from the default dialog demo

$('span.OK').click(function() {
    setTimeout(function(){ $( "#dialog" ).dialog(); }, 100);
});

here is the fiddle http://jsfiddle.net/survivant/cyFxp/3/

I found that there is a default help icon in the theme, but I'm not sure how to display it in the title bar.

The goal is to have a ? (help) button display beside the X (close) button. When I click on it, I want a popup to open (probably another dialog) that will show the help.

EDIT

Thanks to the answers given, I have now a help icon that will show an alert when clicked. However, when hovering over this icon, the cursor is a "move" cursor instead of a "pointer" cursor like the close button.

How can I make prevent the "move" cursor in favor of the "pointer" cursor?

PS. the demo in the answer below works in jsbin, but my demo in jsfiddle doesn't work.

Solution 1

You can use dialogClass property of jquery ui dialog to give a class to your dialog. Than you can search for that class and append ui-icon-help to dialogs titlebar. Check this fiddle:

Demo fiddle

Now you can set necessary events on the icon according to your need.

Hope this is what you are looking for!

EDIT

I have checked your fiddle and update it, check this :

Updated fiddle

Solution 2

I know this is an old thread, but I thought this might help someone.

If you are creating a dialog on the fly (without creating a dialog from an existing HTML element), the easiest way I've found is by using the dialog's "open" event (http://api.jqueryui.com/dialog/#event-open) to prepend (or append) your icon to the title.

The following example uses font-awesome icons with Twitter Bootstrap, but you can use any icon or image you want for the myIcon variable:

var myIcon   =  '<i class="icon icon-flag-checkered icon-large pull-left"></i>';       
var myDialog = $('<div title="ALMOST DONE!">'
    + 'Your Text/HTML Here'
    + '</div>');
myDialog.dialog({
    resizable   : false,
    height      : 'auto',
    open        : function(){
        $(this)
        .parent()
        .children(".ui-dialog-titlebar")
        .prepend(myIcon);
    },
    buttons     : {
        "Any Button"    : function(){
            alert('Yep, you clicked it.')
        },
        "OK"    : function(){
            $(this).dialog('close');
        }
    }
});

example at jsfiddle: http://jsfiddle.net/drb26/2/

Comments

[Sebastien Dionne]

almost, if I want to add a event handler on this new span, the hover show the Move cursor. I was able to show a popup with this $("#iconhelp").click(function(){ alert('help'); });

[Sebastien Dionne]

merci, thanks that will do the job. It's really appreciated.