CODEWITHSUNDEEP
jqueryqtip2
user4843525
user4843525

Reputation: 23

How to load page in qtip tooltip

I want to make all links with the class "tooltip" load tooltip containing the page they link to, here's code I got from http://jsfiddle.net/craga89/L6yq3/ but for some reason it's not working..

		<script>
			// Create the tooltips only when document ready
 $(document).ready(function()
 {
     // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
     $('.tooltip').each(function() {
         $(this).qtip({
            content: {
                text: function(event, api) {
                    $.ajax({
                        url: api.elements.target.attr('href') // 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
                }
            },
            position: {
                viewport: $(window)
            },
            style: 'qtip-wiki'
         });
     });
 });                                               
		</script>

Upvotes: 0

Views: 447

Answers (1)

Alex Sidorenko
Alex Sidorenko

Reputation: 546

You can show whatever you want inside a tooltip.

You have .then callback and have all requested content inside it.

.then(function(content) {
    // Set the tooltip content upon successful retrieval
    var img = $(content).find('img'); // Get particular image from response html
    api.set('content.text', img); // Show that image
 }, function(xhr, status, error) {
     // Upon failure... set the tooltip content to error
     api.set('content.text', status + ': ' + error);
 });

http://jsfiddle.net/L6yq3/3007/

Upvotes: 1

Related Questions