View Full Version : Speech bubbles tooltip

12-18-2010, 10:56 AM
1) Script Title: Speech bubbles tooltip

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/speechbubblestooltip.htm

3) Describe problem: Where can I change the distance between hyperlink and tooltip?

12-18-2010, 11:58 AM
In the speechbubbles.css file. Add top and/or left margin as shown:

background-color:#EDEDED; /*background color of tooltip*/
border:1px solid black;
width:200px; /*default width of tooltip*/
border-radius:8px; /*CSS3 border radius*/
box-shadow:0 0 10px #888888; /*CSS3 shadow*/
-moz-box-shadow:0 0 10px #888888;
-webkit-box-shadow:0 0 10px #888888;
margin-top: 20px;
margin-left: 30px;

Negative values are allowed.

12-19-2010, 10:34 AM
Thank you so much!

02-24-2011, 07:48 PM

I did this and it works fine when the arrow is facing upwards, That is, if the animation comes from bottom to top. I'm able to position the arrow just beneath the link where it gets underlined if you put the mouse on it. The other way around it's 'different'. I've got a vertical list and if the animation comes from above, it stops 1 text line above. example :


if I put my mouse on item c, and the animation comes from above it'll point more or less to 'top' b. I hope I make myself clear. Is there any way this could be fixed?

Thank you.

05-21-2013, 02:58 AM
I'm having a related problem. Instead of using inline text link to trigger the speech balloons, I am using anchors around images that are 80px height. I've done the margin-top fix and that helps, however, the separation between the stop points for the coming-from-top and coming-from-bottom arrows is not far enough. If you hold your cursor over the top or bottom 15% of the image then the speech bubble keeps coming into view over and over again because the cursor is over top the speech bubble.

Is there a way to set the margins for top and bottom differently? I've tried

margin: -30px auto 30px;
margin: 30px auto 30px;
margin: 30px auto -30px;
margin: -30px auto -30px;

None of these increase the "gap" between the two points. How do I increase the gap?

05-21-2013, 11:16 AM
When combining the margin like that, 4 values often need to be used. Using the more verbose separated margins should work and is at least easier to keep straight in your mind:

margin-top: ##px;
margin-right: auto;
margin-bottom: ##px;
margin-left: auto;

where ## is replaced by the desired margin, which can be different for top and bottom. Also, instead of auto for left and right, you might be better off with 0 for those values.

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.

05-21-2013, 09:44 PM
Here are a copies of my development page for you to see. I am using the script for the software/hardware icons below the "Call" number.

On this version of the page: trishah.com/clients/ted2/ I am using: margin: 0 auto ;

Here: trishah.com/clients/ted3/ I am using:

margin-top: 30px;
margin-right: auto;
margin-bottom: 30px;
margin-left: auto;

When I use 30px top/bottom all that happens is the gap becomes larger but the balloon now stops further down the page and when it comes from the top, it's lower than on /ted2/.

05-22-2013, 02:37 AM
Okay, after some playing around, I was able to find a fix...

#icons a { height: 80px; width:100%; display:block;}

By adding a height and display:block the url area is larger and the balloons stop at a better position with more of a gap in between. trishah.com/clients/ted2/

I'd still like to be able to position it better but this is working okay for now.

05-22-2013, 03:50 AM
Still a problem in Firefox. Make the height 100% as well and that fixes it in the Fox. However, the tips would probably align best if no width or height were specified for the a tags. They should be display block. Now they will respond to hovering over the images because they will be the same dimensions as the images. With the shorter looking images though, that makes the top tip look too far away. That's because the shorter looking images are as tall as the taller ones (padded by an unseen transparent part of the image). If the shorter images were only as tall as they need to be, you could set the vertical-align on the td's to bottom, and it should all work out:

#icons td {vertical-align: bottom;}