close button for jquery qtip tooltip plugin

I am trying to have a close button on the qTip tooltip - i have the following:

 <script type="text/javascript">
        $(document).ready(function () {

            //****** tooltips **********
            $('img.help').hover(function () {

          // Destroy currrent tooltip if present
          if ($(this).data("qtip")) $(this).qtip("destroy");

          $(this) // Set the links HTML to the current opposite corner
            .qtip({
                content:开发者_运维百科 
                {
                    text: 'this is the tooltip, better to use the alt attribute of the image or use html div content somewhere on the page', 
                        title: {
                        text: 'This toolip title',
                        button: true
                        }
                },
                position: {
                    corner: {
                        tooltip: 'bottomLeft', // Use the corner...
                        target: 'topRight' // ...and opposite corner
                    }
                },
                show: {
                    solo: true,
                    when: false, // Don't specify a show event
                    ready: true // Show the tooltip when ready
                },
                hide: false, // Don't specify a hide event
                style: {
                    border: {
                        width: 5,
                        radius: 10
                    },
                    padding: 10,
                    textAlign: 'left',
                    tip: true, // Give it a speech bubble tip with automatic corner detection
                    name: 'blue' // Style it according to the preset 'cream' style
                    // name: 'light' // Style it according to the preset 'cream' style
                }
            });


      });

however, I do not have a close button. Is there supposed to be an image in my image folder or a style created to do this? All I see in the documentation here is to indicate button: true. I have tried button: 'close' and that creates a 'close' hyperlink as it should - just can't get the close image variation working. Any ideas on what I may be missing here?

This is my solution, I wanted a java action to close the qtip when I clicked a button

    <input type="button" name="calendar_main_delete" class="calendar_main_delete"  id="calendar_main_delete" value="Delete Event" />
              <input type="button" onClick="parent.location='#edit'" value="Edit Event" />



       <script type="text/javascript">

//click button call from button above
$('.calendar_main_delete').click(function() {

//.qtip is my qtip element from the parent page and then I hide it.
$('.qtip', window.parent.document).qtip("hide");
});
</script>

qTip 2 has a close button option. Add the option button close to content and that will add a close button. Positioning can be done using css. The below code snippet will get you started.

$item.qtip({
    overwrite: true,
    content: {
        text: content,
        button: 'Close'
    }
});

If you need more information on this please refer to this: http://qtip2.com/options. Look for "content.button" on the page.

I am not sure if this is what you are looking for, but from what I can see the close button on the demo page is not an image, but is styled via css like this:

.ui-tooltip-icon .ui-icon {
    background: none no-repeat scroll -100em -100em transparent;
    color: inherit;
    font: bold 10px/13px Tahoma,sans-serif;
    height: 14px;
    text-align: center;
    text-indent: 0;
    width: 18px;
    border-radius: 3px 3px 3px 3px;
}

And the html is:

<span class="ui-icon ui-icon-close">×</span>

I hope this was helpful!