close button for jquery qtip tooltip plugin

Question

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?

Answer 1

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!