PDA

View Full Version : multiple tooltip bubbles



xiphoid
04-10-2013, 09:52 PM
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
04-11-2013, 04:03 AM
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
04-11-2013, 09:10 AM
Thanks for your reply, it doesn't seem to work unless I use id: http://fifacommunityfor.us/test/

Thanks again :)

jscheuer1
04-11-2013, 12:56 PM
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
04-11-2013, 01:04 PM
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
04-11-2013, 03:28 PM
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
04-11-2013, 05:17 PM
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/jQuery.bubbletip-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
04-13-2013, 04:53 PM
Bump :)

jscheuer1
04-13-2013, 05:24 PM
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
04-13-2013, 06:40 PM
OK, download and use this version of the script (right click and 'Save As'):

5037

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.

xiphoid
04-13-2013, 11:28 PM
Wow. Thanks John, that works perfectly.

Thanks very much for all your help! :)

jscheuer1
04-14-2013, 02:19 AM
Good. However, I still had the local mock up of it up in the browser here and was playing around with it one last time before closing it and discovered that, if you click on the trigger again after the bubble comes up, and then click on another trigger, the previous bubble doesn't close, so you have two bubbles open.

So I updated the script again (right click and 'Save As'):

5038

BTW, I was right about IE, and this version (as well as the previous one) plus the change to the on page code for the conditional stylesheet call fixes the IE problem.

Another thing to be aware of is that, if you want to go back to mouseover/mouseout, you will need to go back to the official version of the script, this one only works with click trigger to open, click x or a different trigger to close.

And I should add that I'm not entirely happy with what I had to do here to prevent the problem described at the beginning of this post of the tip not closing if the trigger for it is clicked a second time and then another trigger is clicked, nor with the script in general. So there might be other issues.

xiphoid
04-15-2013, 06:49 AM
Thank you very much John, it's now working perfectly :)