[Solved] Pass title AND content in attr:title with separator

[johndubya]

Is there any possible way to duplicate a behavior of the bassistance.de Tooltip system (http://bassistance.de/jquery-plugins/jqu...tooltip/)? They basically allow you to pass the title of the tooltip AND the content of the tooltip in the title attribute of the element. So you could do this:

HTML Code

<span title="The Title|Here is the content.">Testing</span>

And the script would take the part previous to the | and make it the title, then the rest would be the content. Is that possible with qTip2?

[Craig]

Sure, just implement it manually

JS Code

$('[title]').each(function() {
	var self = $(this),
		match = self.attr('title').match(/([^|]+)/gi);
 
	// Make sure we got the details
	if(!match || !match[0] || !match[1]) { return; }
 
	self.qtip({
		content: {
			text: match[1],
			title: match[0]
		}
	});
});

[johndubya]

That works a charm, thank you so much! I am running qTip2 inside of a live() setting, so I had to do a bit of modifying, but it works great. Here's what my code ended up looking like:

JS Code

$(".tip,.tipBtn,.tipAuto,.mmddyyyy").live("mouseover",function(event){
	var theMatch = $(this).attr('title').match(/([^|]+)/gi);
	//if no separator, fill title and text with default info
	if(!theMatch || !theMatch[0] || !theMatch[1]) { theMatch[0]=""; theMatch[1]=$(this).attr("title"); }
	$(this).qtip({
		overwrite: false, // Make sure the tooltip won't be overridden once created
		content: {
			text:theMatch[1],
			title:theMatch[0]
		},
		position: {
			adjust: {x:10,y:-25,mouse:true},
			target: "mouse",
			viewport: $(window)
		},
		show: {
			delay: 0,
			effect: false,
			event: event.type, // Use the same show event as the one that triggered the event handler
			ready: true, // Show the tooltip as soon as it"s bound, vital so it shows up the first time you hover!
			solo: true
		},
		hide: { delay:0, effect:false }
	}, event); // Pass through our original event to qTip
})
// Store our title attribute in "oldtitle" attribute instead
.each(function(i){
	$.attr(this,"oldtitle",$.attr(this, "title"));
	this.removeAttribute("title");
});