Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: multiple tooltip bubbles

  1. #1
    Join Date
    Mar 2013
    Posts
    10
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default multiple tooltip bubbles

    Hi,

    I'm using the following code:

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,690
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    xiphoid (04-13-2013)

  4. #3
    Join Date
    Mar 2013
    Posts
    10
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

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

    Thanks again

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,690
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    Replace:

    Code:
    <script type='text/javascript'>
    		$(document).ready(function() {
    
    			$('.a1_right').bubbletip($(this).next('.tip1_right'), { deltaDirection: 'right' });
    
    		});
    	</script>
    with:

    Code:
    <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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    xiphoid (04-13-2013)

  7. #5
    Join Date
    Mar 2013
    Posts
    10
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by xiphoid; 04-11-2013 at 01:58 PM.

  8. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,690
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

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

    Code:
    <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:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    xiphoid (04-13-2013)

  10. #7
    Join Date
    Mar 2013
    Posts
    10
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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

  11. #8
    Join Date
    Mar 2013
    Posts
    10
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Bump

  12. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,690
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  13. The Following User Says Thank You to jscheuer1 For This Useful Post:

    xiphoid (04-13-2013)

  14. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,690
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

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

    jQuery.bubbletip-1.0.6.js

    And change this:

    Code:
    	<!--[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:

    Code:
    	<!--[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.
    Last edited by jscheuer1; 04-14-2013 at 02:06 AM. Reason: update ipdated script
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  15. The Following User Says Thank You to jscheuer1 For This Useful Post:

    xiphoid (04-13-2013)

Similar Threads

  1. Speech bubbles tooltip
    By bubbles in forum Dynamic Drive scripts help
    Replies: 8
    Last Post: 05-22-2013, 03:50 AM
  2. Speech Bubbles Tooltip and event handlers
    By paul_m in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 09-23-2012, 05:14 AM
  3. Speech Bubbles Tooltip - Charset
    By felzzz in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 08-26-2011, 03:18 PM
  4. Speech Bubbles Tooltip : not working in IE7 & Chrome
    By anujoshi10 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-17-2011, 05:20 AM
  5. Speech Bubbles tooltip .net Masterpages
    By janetb in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-14-2011, 10:40 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •