close button for jquery qtip tooltip plugin

FiveTools picture FiveTools · Sep 28, 2011 · Viewed 7.9k times · Source

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

JamesPC picture JamesPC · Jan 19, 2012

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>