craigsworks.com - Support Forum - [Solved] HTML in qTip

Having searched the site and this forum for a couple of hours I still don't know the simplest way of including HTML in a qTip.

I suppose I would have use a different tag like qtip instead of the title tag, since html would show if script is turned off.

What I thought of is code like this:
[php]<a href="#" title="Hello World" qtip="<strong>Hello <em>World</em></strong>">Hello</a>[/php]

How would I have to setup qtip to acomplish that? I tried this, but failed:

JS Code

$(document).ready(function()
{
	$('.selector').qtip({
		   content: {
			  attr: 'qtip'
		   }
		})
		position: {
			corner: {
				target: 'leftMiddle',
				tooltip: 'rightTop'
			}
		}
		hide: { 
			fixed: true, 
			delay: 200 
		}
});

Please advise.

That isn't valid HTML, and will cause all sorts of problems when the browser attempts to parse it. The idea, is to put your HTML content somewhere in the DOM that's easily accessible and identifiable to a praticular element. Usually people put it in a hidden div directly beneath the element you want to apply it to using qTip, and grab it using this.next():

HTML Code

<a href="#" title="Hello World">Hello</a> 
<div style="display: none">
	<strong>Hello <em>World</em></strong>
</div>

JS Code

$('a').each(function() {
	$(this).qtip({
		content: $(this).next('div:hidden')
	});
});

Also, that code you've pasted is a mixture of both qTip 1.0 and qTip2 syntax. Run it though the code converter to ensure it is using correct qTip2 syntax: http://craigsworks.com/projects/qtip2/converter/

Thank you Craig.

I ran the code through the converter and placed it on my page, but it doesn't seem to work at all.
You may check it out yourself: Test qTip2

Firefox also reported a syntax error in jquery.qtip.min.css, maybe that's why?

I suppose the approach you outlined wouldn't work for more than one tipp, or how would I access another tipp somewhere else on the page, or the same at another point?

Could I not name the tipps, place them at the end of the document and call them by name?

Kind regards,

Frank

Your syntax is off, as you're missing an end bracket in your code.

JS Code

$(function() {
	$('a').each(function() {
		$(this).qtip({
			content: $(this).next('div:hidden')
		});
	});
}); // Your forgot this

And yes, it will work for multiple tooltips, provided each of the elements you select using the selector has a hidden div next to it Smile

But it really depends how you're going to implement it if you want to use ID's instead and stick the content at the end.

(8th February 02:17)Craig Wrote: [ -> ]Your syntax is off, as you're missing an end bracket in your code.
JS Code
}); // Your forgot this

Dear Craig,

I appologize. It was quite late for me.

Nevertheless, even after adding those brackets, and then also changing the code back to yours, it doesn't work for me.

Sorry for being such a pain. You can tell, I am quite new to jquery.

Thanks for your great support.

Kind regards,

Frank

You've for the src attribute of your second script tag set to a CSS file... might want to remove that Wink

You've also got the syntax of the content call wrong. Also, stick the script tags at the bottom of the page, just before the end </body> tag, as it's more efficient:

HTML Code

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
	$('a').each(function() {
		$(this).qtip({
			content: $(this).next('div:hidden')
		});
	});	
});
</script>
</body>

(8th February 15:21)Craig Wrote: [ -> ]You've for the src attribute of your second script tag set to a CSS file...

Quite foolish of me, sorry! Glad to report, that it works now with one tip, except for the HTML.

I like to have several tipps on one page and even reuse tipps at different locations on the page. Having searched for it I found several threads which came close to it and even a reference where you talked about a qTip2 tutorial for it, but I wasn't able to locate it.

Here is the code I try to get to work:

JS Code

<p><a href="#" title="Hello World">Hello World</a></p>
<p><a href="#" title="Hello World">Hello Craig</a></p>
<p><a href="#" title="Hello World">Hello World</a></p>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.qtip.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('a').each(function() {
		$(this).qtip({
			content: $('.next(div:hidden')
		});
	});	
});	
</script>
<!-- block of tipps -->
<div id="world" style="display: none">
	<strong>Hello <em>World</em></strong><a href="http://news.google.de">Google</a>
</div>
<div id="craig" style="display: none">
	<strong>Hello <em>Craig</em></strong><a href="http://craigsworks.com">Craigworks</a>
</div>

I understand that the function would have to look different, but have no clue how.

Thanks for your patience and support.

Kind regards,

Frank

As I come to think about this some more I get the feeling that my div tipps are not being used. What I see it just the content of the title tags. When I remove them, no tip is being displayed. It makes no difference where the divs are placed in the document and if they have an id or not.

Hmm fspade, do you have much experience with JavaScript? You seem to have a misunderstanding of the basics here heh. No where in your code do you reference those divs, you've simply told qTip to look for a div directly next each of the elements selected by your selector, in this case "a", and use its contents for the tooltip. Since your hidden divs are not directly "next" to the element in the DOM i.e. not directly after it in the HTML, qTip won't find any content and will instead use the title attribute for the content instead.

(9th February 17:05)Craig Wrote: [ -> ]Hmm fspade, do you have much experience with JavaScript?

No, not much experience with JavaScript either.

Your first post in this thread got me to this approach and I think I finally implemented it just the way you told me there:
qTip2 test

I wasn't aware that a paragraph would already cancel the next. Oh well ...

After looking around some more I noticed the example kiddailey posted and thought that would give me just what I am looking for, but it fails when I reuse a tipp on another link and go back to it for the second time. You can look at it here. What am I missing?

Having this new issue at the end of a thread that was too early marked as solved doesn't seem to help. Therefore I'll start a new thread and hope ...