You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

Multiple html tool tips on the same line. Created Aug 5, 2010

This thread is solved

Views: 1420     Replies: 5     Last reply Aug 23, 2010  
You must login first before you can use this feature

njprrogers

Posts: 2

Registered:
Aug 5, 2010

Multiple html tool tips on the same line.

Posted: Aug 5, 2010

Hi,

I have a piece of code which will look like this:


<p>
Hi this is <a href="#" class="tooltip">a tooltip 1</a> and this is a <a href="#" class="tooltip">a tooltip 2</a></p>
<div>
hi tooltip1
</div>
<div>
hi tooltip2
</div>

Effectively, I am looking for two html tooltips on the same line... but the problem is the tooltip will take the next element in the DOM to be the tooltip. Not so good for the second tooltip which will show the content for tooltip no. 1 on hover.

Is there any way to achieve this?

Thanks,

Nick

randyfyfe

Posts: 17

Registered:
Aug 17, 2010

» Multiple html tool tips on the same line.

Posted: Aug 17, 2010

Reply to: Multiple html tool tips on the same line., from njprrogers
I found an attribute for tooltip that is not documented very well. look at:http://flowplayer.org/tools/demos/tooltip/table.html

There is a "tip:" attribute that you are lookign for.

rewrite your code like this:


	$(".tooltip1").tooltip({
		tip: '#tooltipdiv1',
	}),
	$(".tooltip2").tooltip({
		tip: '#tooltipdiv2',
	});
<p>
Hi this is <a href="#" class="tooltip1">a tooltip 1</a> and this is a <a href="#" class="tooltip2">a tooltip 2</a></p>

<p> you can put other html between your tooltips, and/or relocate the two divs below anywhere within the body tags</p>
<p>the way i have it setup, anythign with the class of "tooltip1" or "tooltip2" will have the appropriate tooltip</p>
<div id="tooltipdiv1">
hi tooltip1
</div>
<div id="tooltipdiv2">
hi tooltip2
</div>
</code

shmul

Posts: 2

Registered:
Aug 21, 2010

one parametered tooltip

Posted: Aug 21, 2010

Reply to: » Multiple html tool tips on the same line., from randyfyfe
I was looking for the same thing, only I want the tooltip to be generated according to a parameter.

The thing is, that more than 100 elements are using the same tooltip except for minor changes.
So with what I have now, I write (almost) the same tooltip 100 times.
Any idea?

randyfyfe

Posts: 17

Registered:
Aug 17, 2010

» one parametered tooltip

Posted: Aug 23, 2010

Reply to: one parametered tooltip, from shmul
if they are all the same tool tip, just specific the tip atribute as the same.

if they all differ (even slightly), you will probably want to use the title attribute method (one of the basic methods of making a tooltip).

shmul

Posts: 2

Registered:
Aug 21, 2010

This is how I did it

Posted: Aug 23, 2010

Reply to: » one parametered tooltip, from randyfyfe 

$("div .prices_scale").tooltip({
	delay:10,
	predelay:200,
	tip: '#prices_scale_tooltip',
	onBeforeShow: function() {
	switch(this.getTrigger().attr("rel"))
	{
	case 'half1':
		title = 'Some title';
		body = 'Some body';
		break;
	case 'half2':
		title = 'Other title';
		body = 'other body';
		break;
	default:
		title = 'default body';
		body = 'default body';
						
	}
	$('#prices_scale_tooltip').html('<h6>'+ title +'</h6><p>'+ body +'</p>');
	}
});

randyfyfe

Posts: 17

Registered:
Aug 17, 2010

» This is how I did it

Posted: Aug 23, 2010

Reply to: This is how I did it, from shmul
that's pretty awesome. im keeping that in my back pocket.

•