Display Html page inside overlay using qtip2

Question

I am trying to display a html page inside an overlay on top of my current page.

https://i.sstatic.net/ztVS7.jpg This is a picture to demonstrate what i'm after, The white page is the overlay i would like to place over the top of my webpage and it is offset to the right to take up the space without covering the menu on the left.

After some research i figure the best bet would be qtip2 however I cannot get it to work correctly.

When the tooltip does load i get a parse xml error tooltip.. I figure if i can just get it to pop the content then i can go about styling it correctly.

$(document).ready(function()
 {
     // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
     $('.changePage').qtip({
       content: {
         text: function(event, api) {
           $.ajax({
             url: element.data('url') // Use data-url attribute for the URL
           })
           .then(function(content) {
             
             // Set the tooltip content upon successful retrieval
             api.set('content.text', content);
           }, function(xhr, status, error) {
                // Upon failure... set the tooltip content to the status and error value
                api.set('content.text', status + ': ' + error);
            });

            return 'Loading...'; // Set some initial text
        }
    }
	});
 });

.block:hover {
	cursor: pointer;
	background-color: rgba(0,0,0,0.8);
	color: #BE1E2D;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block" id = "change1">
  <a href='change.html' class = "changePage"></a>
  
  <div class="big-text">Popup</div>


</div>

Answer 1

I see a few mistakes. First you need to place your text in between your a tags so that when you hover it, the function can run. Then your element variable is not being defined because you first need to all the api variable. Try this code. It should work:

HTML:

<div class="block" id ="change1">
    <a data-url="change.html" class="changePage">Popup</a>
    <div class="big-text"></div>
</div>

JS:

$('.changePage').qtip({
    content: {
        text: function(event, api) {
            $.ajax({
                url: api.elements.target.data('url')
            }).done(function(html) {
                api.set('content.text', html);
            }).fail(function(xhr, status, error) {
                api.set('content.text', status + ': ' + error);
            });
            return 'Loading...';
        }
    }
});