[Solved] Load tips from external file... how?

[sparky672]

Why am I finding this so difficult? I cannot locate a working example and I can't seem to figure out how to piece this together from the online documentation.

This is something I'd expect to see as a secondary default setup but I must be blind.

My tooltips are going to be way too long to embed inside all the "title" attributes. So I was thinking I'd simply store these in an external file and call them up as needed. Despite my best efforts, no matter how I try to call this file, nothing happens.

Can somebody point me to a working example?

Thank-you!

[sparky672]

Update:

I finally figured out how to load the content of an external HTML file but I have absolutely no idea how to parse it! With one working example or demo, it's probably a snap... however I can't seem to find the forest through the trees.

[Craig]

Hmm sparky, not sure if this is quite what you're looking for but why not include the tip contents under a standard div class directly next to all your elements that need a tooltip? Like so:

HTML Code

<div rel="tooltip">I ahve a tooltip</div>
<div class="tooltipContent">
	Content for tooltip here
</div>

JS Code

$('[rel=tooltip] + .tooltipContent').each(function() {
	$(this).qtip({
		content: $(this)
	})
});

[sparky672]

(5th January 16:23)Craig Wrote:  Hey sparky, it's just a case of using the dataFilter function and/or success handler:

JS Code

$('.selector').qtip({
	content: {
		ajax: {
			url: 'page.php', // Your page url
			data: { id: 3 }, // Random data
			dataFilter: function(content, type) {
				return content.replace('fish', 'dog'); // Random parsing
			}
		}
	}
});

Thank-you for the reply but I'm still confused by the example.

In my remote file, I have this...

JS Code

<div id="one">This is tip #1, bla, bla</div>
<div id="two">This is tip #2, bla, bla</div>
<div id="three">This is tip #3, bla, bla</div>
<div id="four">This is tip #4, bla, bla</div>

Then in the HTML of the page using qTips...

<ul>
<li><a href="#" title="one">My Link to Tip 1</a></li>
<li><a href="#" title="two">My Link to Tip 2</a></li>
<li><a href="#" title="three">My Link to Tip 3</a></li>
<li><a href="#" title="four">My Link to Tip 4</a></li>
</ul>

Now I'm totally lost. How does the "content.replace" work?... I cannot seem to understand how to apply that line in your example to my situation.

I'm sure I'll feel stupid after you explain it...

Thank-you for all your hard work on qTip!

[Craig]

Oh I see. You could do something along the lines of this:

JS Code

$('.selector').each(function() {
	$(this).qtip({
		content: 'Loading...',
		events: {
			render: function(event, api) {
				// Grab our tooltip id from the target element
				var id = api.elements.target.attr('title');
 
				// Load $('#<id>') from the tooltips.html page and replace the tooltip content with it
				api.elements.content.load('tooltips.html #'+title); 
			}
		}
	}
});

[sparky672]

Cool!!

I'll let you know how it works...

Seriously though... this should be a permanent part of your tutorials or documentation... all I kept thinking yesterday is about how nice it would be to have all the lengthy tips removed from the title attributes and stuck in their own single file. Plus, then I could include more HTML with the tip text rather than trying to embed/escape all that junk in the title attribute.

Alternatively, I was also thinking of converting my main tip file into it's own page so the user can see the "glossary" all in one place or individually via the tip. And the webmaster only has to edit one file when updating tips.

[Craig]

That's a pretty neat idea. You could even use the metadata plugin to apply different options for each tip directly on the elements themselves! I'll definitely look into making this a tutorial.

[sparky672]

Sorry. This is not working.

It just displays the title in a browser tooltip, not in a qTip...

JS Code

$('.selector').each(function() {
   $(this).qtip({
      content: 'Loading...',
      events: {
         render: function(event, api) {
            // Grab our tooltip id from the target element
            var id = api.elements.target.attr('title');
 
            // Load $('#<id>') from the tooltips.html page and replace the tooltip content with it
            api.elements.content.load('/ws/includes/tips.html #'+title); 
         }
      },
	position: {
		at: "top right",
		my: "bottom left"
	},
	hide: {
		effect: true
	},
	show: {
		effect: true
	},
	style: {
		tip: true,
		classes: "ui-tooltip-custom ui-tooltip-shadow ui-tooltip-rounded",
		tip: {
         corner: true,
         offset: 35
       }
	}
  });
});

---

Alternatively, this just displays "Loading..." in a qTip...

JS Code

$(document).each(function(){
   $('ul.subindex li a[title]').qtip({
      content: 'Loading...',
      events: {
         render: function(event, api) {
            // Grab our tooltip id from the target element
            var id = api.elements.target.attr('title');
 
            // Load $('#<id>') from the tooltips.html page and replace the tooltip content with it
            api.elements.content.load('/ws/includes/tips.html #'+title); 
         }
      },
	position: {
		at: "top right",
		my: "bottom left"
	},
	hide: {
		effect: true
	},
	show: {
		effect: true
	},
	style: {
		tip: true,
		classes: "ui-tooltip-custom ui-tooltip-shadow ui-tooltip-rounded",
		tip: {
         corner: true,
         offset: 35
       }
	}
  });
});

[Craig]

Works fine as far as I can see... take a look: http://jsfiddle.net/fDavN/74/

[sparky672]

(5th January 19:55)Craig Wrote:  Works fine as far as I can see... take a look: http://jsfiddle.net/fDavN/74/

Ah! I found your typo...

api.elements.content.load('/ws/includes/tips.html #'+title);

should have been...

api.elements.content.load('/ws/includes/tips.html #'+id);

YES!... it is working now!! After beating on my head for two days... it's working. This is awesome... everything remotely stored in an HTML file.... neato!

THANK-YOU!!

---

For the reader: here is my working code altered slightly for jsfiddle to simulate the external file...

http://jsfiddle.net/JN3BG/

[Craig]

Ah yes, I'll edit it with the fix. Great to see its working sparky, definitely a great idea. One fallback I can see however is that every tip will need atleast one AJAX call... perhaps you could include the tooltips file within the page itself i na hidden div, or even perhaps a hidden iframe. That way you can avoid it.

[sparky672]

(5th January 20:32)Craig Wrote:  .... One fallback I can see however is that every tip will need atleast one AJAX call...

What is/are the downside(s) to this?

(5th January 20:32)Craig Wrote:  ...perhaps you could include the tooltips file within the page itself i na hidden div, or even perhaps a hidden iframe. That way you can avoid it.

If I do that, then it won't be able to double as an external glossary or FAQ page.

[Craig]

Well mostly just load on the server. But then it depends if you've optimized it specifically for this (which I doubt ). Using it in an iframe can still give you the same functionality, and still allows you to use it as a glossary since the iframe's content is just the external page you were calling in the .load() method.

Here's an example of this using an iframe:

HTML Code

<iframe src="tooltips.html" style="position: absolute; left: -1000px; top: -1000px;"></iframe>

JS Code

$(document).each(function(){
	$('ul.subindex li a[title]').qtip({
		content: 'Loading...',
		events: {
			render: function(event, api) {
				// Grab our tooltip id from the target element
				var selector = '#' + api.elements.target.attr('title'),
					iframe = $('iframe'),
					content = $(selector, iframe.contents());
 
				// Update our tooltip content (repositions automatically)
				api.set('content.text', content);
			}
		}
	});
});

This is probably a better solution, since it results in less code. Just make sure you're iframe content is in the same domain and is hidden from view and you're set! Plus no nasty AJAX call for every qTip on the page!

[sparky672]

(5th January 23:41)Craig Wrote:  Well mostly just load on the server.
....

Plus no nasty AJAX call for every qTip on the page!

Thanks for that! Yeah, you're right... the iframe is loading from another file anyway so my idea can still be implemented.

I'm not sure how much load or what's really happening though... It seems like (with Safari anyway) that it's cached in the browser. First load of the first tip results in a little lag but then subsequent calls to the tips pop right up.

Your idea is better and I'll probably do it... I'm all about efficient code.

[Craig]

Yeah the iframe idea is simply load-saving. You fetch all the tooltips at once instead of fetching the page each time a tooltip is opened, resulting in quite a significant bandwidth saving if the page is big.

[sparky672]

(5th January 23:41)Craig Wrote:  Here's an example of this using an iframe:

HTML Code

<iframe src="tooltips.html" style="position: absolute; left: -1000px; top: -1000px;"></iframe>

JS Code

$(document).each(function(){
	$('ul.subindex li a[title]').qtip({
		content: 'Loading...',
		events: {
			render: function(event, api) {
				// Grab our tooltip id from the target element
				var selector = '#' + api.elements.target.attr('title'),
					iframe = $('iframe'),
					content = $(selector, iframe.contents());
 
				// Update our tooltip content (repositions automatically)
				api.set('content.text', content);
			}
		}
	});
});

I tried this and nothing happens. No qTip.

[Craig]

Any errors sparky?

[sparky672]

No errors. I put the iFrame line outside of my content but still inside the body. Hover does nothing... no qTip, just the default tooltip.

I was playing around with it. Instead of hiding the iframe, I just placed it inline and it strangely blocks my page content. I mean that I set the iframe to a fixed width of 100px square and I can see it, but everything downstream of it will not show on the page. (this is probably an HTML problem I had not enough time to investigate).

However, no matter where I placed it, no matter what size I made it, even if I placed it -10000 pixels off the page, the qTips will not show up.

One exception, when I place it AFTER the qTip JS, a blank qTip appears; but that's only because the JS is before the iframe.

[Craig]

sparky, run your HTML through the W3C Validator to see if you've got any errors in there. Other than that it would be great if you could setup a jsFiddle test case with this.

[sparky672]

(11th January 17:42)Craig Wrote:  sparky, run your HTML through the W3C Validator to see if you've got any errors in there. Other than that it would be great if you could setup a jsFiddle test case with this.

1. It's all green at the w3c validator.

2. Not really sure how to set this JSfiddle up correctly since the external tip file is stored on my server. Here it is but it doesn't work because I left the iframe "src" blank.

http://jsfiddle.net/BuQtu/

[Craig]

Seems to be working great once the iframe src is set http://jsfiddle.net/BuQtu/5/

Just have to make sure the iframe contents are on the same server due to Cross-Domain limitations.

[sparky672]

(12th January 09:47)Craig Wrote:  Seems to be working great once the iframe src is set http://jsfiddle.net/BuQtu/5/

JSfiddle not working great here. I'm in both Safari (Mac) and Firefox (Mac). Just to be clear, I'm not talking about my page... the JSfiddle page itself (http://jsfiddle.net/BuQtu/5/) is not working in Safari or Firefox. I'm now seeing just an empty qTip popup. There are no errors and it does not say "loading..."

I've attached a screenshot from Firefox.



I recall seeing that condition on my page once too but it depended on where I placed the iframe code within the HTML.

(12th January 09:47)Craig Wrote:  Just have to make sure the iframe contents are on the same server due to Cross-Domain limitations.

they are.

[Craig]

For some reason you need to hit "Run" again once it's loaded. Must be a fiddle-related script as you're normally not allowed to link directly to the resulting page (I'm an elite haxxor... )

[sparky672]

(12th January 15:24)Craig Wrote:  For some reason you need to hit "Run" again once it's loaded. Must be a fiddle-related script as you're normally not allowed to link directly to the resulting page (I'm an elite haxxor... )

...hitting "Run" in Safari makes no difference here.

...it only works after hitting "Run" in Firefox.

So now after testing this exact code on my production page...

- seems to be working in IE8 and Firefox.
- does NOT work in Safari. (getting the empty qTip)

[Craig]

sparky, any you getting any errors at ALL? Try and console.log() the iframe contents and see if its actually loading.