multiple tooltip bubbles

[xiphoid]

Hi,

I'm using the following code:

<script type='text/javascript'>
		$(document).ready(function() {

			$('#a1_right').bubbletip($('#tip1_right'), { deltaDirection: 'right' });

		});
	</script>

<table border='1'>
<tr>
<td>Monday</td>
<td>Tuesday</td>
</tr>
<tr>
<td> <a id='a1_right' href='#'>1:00</a> </td><div id='tip1_right' style='display:none;'>Content</div>
<td> <a id='a1_right' href='#'>1:00</a> </td><div id='tip1_right' style='display:none;'>Content</div>
</tr>

My problem is that only the first <td> <a id='a1_right' href='#'>1:00</a> </td><div id='tip1_right' style='display:none;'>Content</div> shows the tooltip bubble, the second one doesn't. How can I make it so all the tooltip bubbles show using the function above? There will be more than just the two above.

Thanks

[jscheuer1]

There could also be other problems. But in javascript there can only be one element on a page with a given id. You can initialize multiple bubbletips with one selector if you use class instead of id, but how to determine which tip to use for each one - I would have to see the documentation and/or play with it a little to be sure. Oh, and you cannot have a div out in the middle of a tr like that. Since it's display none anyway, put it in the td. You could try:

<script type='text/javascript'>
		$(document).ready(function() {

			$('.a1_right').bubbletip($(this).next('.tip1_right'), { deltaDirection: 'right' });

		});
	</script>

<table border='1'>
<tr>
<td>Monday</td>
<td>Tuesday</td>
</tr>
<tr>
<td> <a class='a1_right' href='#'>1:00</a> <div class='tip1_right' style='display:none;'>Content1</div></td>
<td> <a class='a1_right' href='#'>1:00</a> <div class='tip1_right' style='display:none;'>Content2</div></td>
</tr>

But, as I say, without the documentation or a live page to work with, I'm not 100% sure about how that will work as far as finding the desired content for each tip goes.

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[xiphoid]

Thanks for your reply, it doesn't seem to work unless I use id: http://fifacommunityfor.us/test/

Thanks again

[jscheuer1]

Replace:

<script type='text/javascript'>
		$(document).ready(function() {

			$('.a1_right').bubbletip($(this).next('.tip1_right'), { deltaDirection: 'right' });

		});
	</script>

with:

<script type='text/javascript'>
	jQuery(function($){
		$('.a1_right').each(function(index, trigger){
			$(trigger).next('.tip1_right').attr('id', 'bubble_' + index)
				.end().bubbletip($('#bubble_' + index), { deltaDirection: 'right' });
		});
	});
</script>

[xiphoid]

Thanks, that works perfectly. One last thing, how can I put a close button on the tooltip so when it's clicked it closes and also if another <a id='a1_right' href='#'>1:00</a> is clicked.

Thanks

[jscheuer1]

That's two other things. For the first one, replace what we just changed with:

<style type="text/css">
.closebut {
	position: absolute;
	top: 19px;
	right: 24px;
	font-family: sans-serif;
	text-decoration: none;
}
</style>
<script type='text/javascript'>
	jQuery(function($){
		$('.a1_right').each(function(index, trigger){
			var $t = $(trigger), $c = $t.next('.tip1_right').attr('id', 'bubble_' + index);
			$c.append('<a class="closebut" title="Close" href="#">x</a>');
			$t.bubbletip($c, { deltaDirection: 'right' });
		});
		$('.closebut').click(function(e){
			$(this).trigger('mouseout');
			e.preventDefault();
		});
	});
</script>

As for clicking on another:

<a id='a1_right' href='#'>1:00</a>

closing an open bubble tip, why bother? Before you click on it, you have to move the mouse over it. When you do, any open tip will close and its tip will open.

[xiphoid]

Thanks for the reply. What I basically want is when the link is clicked to popup the bubbletip and then remain open until the user clicks 'close'.

I tried changing line 41 of http://fifacommunityfor.us/test/js/j...letip-1.0.6.js (bindShow: 'mouseover', // mouseover | focus | click | etc.) to 'click' which only shows the bubbletip when it is clicked (which is what I want to achieve), however the close button stops working after I do that. How can I make it only close when the close button is clicked but only open when the link is clicked?

Thanks very much

[xiphoid]

Bump

[jscheuer1]

I was looking at this a lot, and it appears the author of the bubble tip script 'painted himself into a corner' in several ways. You can't do all of those things with that script. It would have to be modified. Even with that, I can't seem to get the final piece (close previous when a new one is opened) to work. The author also assumed incorrectly that all future IE would require special handling of the PNG images. Starting with IE 7 it probably does not, but might in IE 8 and 7 because those images are faded in and out. By IE 10, perhaps even 9, I think that special handling might even break the script in those browsers, and 9 and 10 certainly don't need to use any special techniques to handle the PNG images, even though they are faded in and out. But handling of the PNG images is another issue, not directly related to what you want to do. It's just another example of how limiting the script is.

Since you bumped it though, when I have time I'll look into that final piece for you.

[jscheuer1]

OK, download and use this version of the script (right click and 'Save As'):

jQuery.bubbletip-1.0.6.js

And change this:

	<!--[if IE]>
	<link href="js/bubbletip/bubbletip-IE.css" rel="stylesheet" type="text/css" />
	<![endif]-->


<style type="text/css">
.closebut {
	position: absolute;
	top: 19px;
	right: 24px;
	font-family: sans-serif;
	text-decoration: none;
}
</style>
<script type='text/javascript'>
	jQuery(function($){
		$('.a1_right').each(function(index, trigger){
			var $t = $(trigger), $c = $t.next('.tip1_right').attr('id', 'bubble_' + index);
			$c.append('<a class="closebut" title="Close" href="#">x</a>');
			$t.bubbletip($c, { deltaDirection: 'right' });
		});
		$('.closebut').click(function(e){
			$(this).trigger('mouseout');
			e.preventDefault();
		});
	});
</script>

to:

	<!--[if lt IE 9]>
	<link href="js/bubbletip/bubbletip-IE.css" rel="stylesheet" type="text/css" />
	<![endif]-->
<style type="text/css">
.closebut {
	position: absolute;
	top: 19px;
	right: 24px;
	font-family: sans-serif;
	text-decoration: none;
}
</style>
<script type='text/javascript'>
	jQuery(function($){
		$('.a1_right').each(function(index, trigger){
			var $t = $(trigger), $c = $t.next('.tip1_right').attr('id', 'bubble_' + index);
			$c.append('<a class="closebut" title="Close" href="#">x</a>');
			$t.bubbletip($c, { deltaDirection: 'right' });
		});
	});
</script>

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.