Load an HTML Page Within qTip Tooltip

[BruceBruce]

Im trying to load a simple html page, instead of a youtube video, using the code from this demo:

http://craigsworks.com/projects/qtip/dem...t/youtube#

I want it to function the same way, where I can go in and interact with the page content inside the tooltip, and then disappear when i click outside of the tooltip, and also if possible, have a close button on the top corner of the tooltip to close it.

How would i edit this code to just load a page called "MyCustomPage.html"?

[Craig]

You'll need to use an iframe:

JS Code

$('.selector').qtip({
	content: $('<iframe src="MyCustomPage.html" />')
});

[BruceBruce]

(19th January 00:42)Craig Wrote:  You'll need to use an iframe:

JS Code

$('.selector').qtip({
	content: $('<iframe src="MyCustomPage.html" />')
});

Thanks Craig,

I tried that, and it seems to work, somewhat. Not quite like the youtube example though where the window stays open until i click outside of the bubble. Im using this with a calendar component and im also not getting the speech bubble behavior im looking for...the window instead opens up as a square right next to the hover area. I would also like to set the width and height of the iframe wih no horizontal scroll. I tried this code but it dosent work:

JS Code

<script>
$('#inlineDatepicker a').qtip({
   content: $('<iframe src="index.html">')
});
 
// Setup the tooltip with the content
      $(this).qtip(
      {
         content: content,
         position: {
            corner: {
               tooltip: 'bottomLeft',
               target: 'topRight'
            }
         },
         style: {
            tip: true, // Give it a speech bubble tip with automatic corner detection
            name: 'dark'
         }
      });
   });
</script>

How would I edit this accordingly?

[Craig]

Combine your two qTip calls:

JS Code

$('#inlineDatepicker a').qtip({
	content: $('<iframe src="index.html">'),
         position: {
            corner: {
               tooltip: 'bottomLeft',
               target: 'topRight'
            }
         },
         style: {
            tip: true, // Give it a speech bubble tip with automatic corner detection
            name: 'dark'
         }
});