Please Log-in or Register to get full access to the forums.


Post Reply 
 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Mulitple qTips on qTip from remote page via ajax
12th January, 02:47
Post: #1
Mulitple qTips on qTip from remote page via ajax
Hi, I've been trying to figure this out for a while with no luck. I have got the primary tip working well. It pulls from another web page and just a specific element of that page, a div.

I wish to have additional qTips with just static content (meaning same now matter which page is pulled) on that poup.

I cannot figure out how to get the second qTips working. You can see an example of how I wish it to work on this site from where I was led to qTip in the first place. However, I cannot see how they implement it.

http://www.alabu.com/almond-moisturizing...milk-soap/

Hover over their ingredient list and see the additional qTips on that popup.

Here is the js I'm using to get the primary popup. The additional qTips would be on elements within the div pulled from the external page.
JS Code
$(document).ready(function(){
     $('.infopane').each(function() {
         $(this).qtip({
            content: {
                text: function(event, api) {
                    $.ajax({
                        url: $(this).attr('page')
                    })
                    .then(function(content) {
                        var elements = $("<div />").append( $.parseHTML(content) ).find('#otip');
						// Set the content of the tooltip to the selected element(s)
						api.set('content.text', elements);
                    }, function(xhr, status, error) {
                        api.set('content.text', status + ': ' + error);
                    });
                    return 'Loading...';
                }
            },
            position: {
              	target: 'event', // Use the triggering element as the positioning target
				my: 'bottom center',
				at: 'right center',
				adjust: { y: -15 },
                viewport: $(window)
            },
           style: { 
             classes: 'qtip-light qtip-rounded qtip-shadow'
           },
           hide: {
             fixed: true,
        	 delay: 1500
    		}
         });
     });
 
 });
Find all posts by this user
Quote this message in a reply
Post Reply 


Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  How to display an html page in qtip billyjoe 0 330 22nd June 21:48
Last Post: billyjoe
  Problem referencing an external html page with Ajax andreaangeli 0 423 21st February 17:44
Last Post: andreaangeli
  Firefox only. When scrolled down the page qTip takes wrong position sree 1 465 15th February 10:29
Last Post: sree
  qTip no removing after ajax page loag with a tag darkav 0 431 20th January 23:54
Last Post: darkav
  Position of Tooltip off screen when lower on the page madebyspark 1 908 27th July 02:06
Last Post: madebyspark
  qTip2 and ajax-request on same page (problems)! Ionit 1 667 29th June 16:23
Last Post: Ionit
  script error on page samiloti 0 717 10th June 11:01
Last Post: samiloti
  qTips always appear above static elements? shoor 0 580 16th May 03:13
Last Post: shoor
  [Solved] Using nested qtips ashmenon 3 1,628 31st March 16:39
Last Post: Goatvirus
  Two modal qtips on same page nestor49 0 720 27th March 08:12
Last Post: nestor49



User(s) browsing this thread: 1 Guest(s)