Load a url from an event into a qtip using ajax

I have a chrome extension which must display the preview of the link in a tool-tip. Right now I can display the url using the text but when it is passed into the ajax part I have no idea how to pass the url as either the event or as an element.Right now it displays the same page on which the browser is in. Being a newbie into java script, and jQuery it would be of great help to me.

jQuery(function($){
$('body').on('mouseenter', 'a', function(e) {
    var o = this;
let url = this.url;
    if ( o.href != '#' ) {
        chrome.extension.sendRequest('show', function(r) {
            var uri = $.url.parse(o.href),
                position,
                text = uri.source.replace(uri.host, '<span style="color:' + r.domaincolor + '">' + uri.host + '</span>');
            // Check if is a tooltip or not
            if (r.istooltip) {
                position = {
                    my: 'top left',
                    target: 'mouse',
                    viewport: $(window),
                    adjust: {
                        y: +25
                    }
                }
            } else {
                position = {
                    my: r.position,
                    at: r.position,
                    target: $(window),
                    adjust: {
                        y: ( r.position === 'left bottom' ? -20 : 0 )
                    }
                }
            } 
            // Is the target a new window?
            if ( $(o).attr('target') == '_blank' ) text = '<i class="fa fa-external-link-square" style="padding-right: 5px;"></i>' + text;
            // Show the qtip
            $(o).qtip({
                overwrite: false,
        content: 
        {
     text: function(event, api) {
                $.ajax({
                    url: api.elements.target.attr('e.url') // Use href attribute as 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 error
                    api.set('content.text', status + ': ' + error);
                });

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

        }
                ,
                show: {
                    event: e.type,
                    ready: true,
                    delay: r.time
                },
                hide: {
                    fixed: true
                },
                position: position,
                style: {
                    classes: 'qtip-dark',
                    tip: {
                        corner: false
                    }
                }
            }, e);
        })
    }
}).on('mouseleave', 'a', function(e){
    $(this).qtip('destroy');
})
});

Thanks in advance.