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>