A bubble of info on CSS links
Here's how to set up information bubbles in CSS. These bubbles have the same style as those websnapr This website takes screenshots of applications it receives, then it stores in a database. They have a height and width fixed, which limits the number of characters to insert.
Here is an example of these bubbles
What a delicious body composition is a graphic chart that follows and you never know what you will.?
Here's what the PNG image to create this information bubble looks like. This preview was taken directly in photoshop.
Click here to download the real image
Now, here is the code to create this information bubble
HTML
<a href="votreDestination" class="info"> The name of your link <span> description of your link with a maximum of 130 characters in this case if </ span> </ a> The CSS
a. info ( position: relative; / * Very important * / background: none; / * Important for functioning on IE * / z-index: 10; ) { a. Info: hover ( z-index: 20; ) a. info span ( display: none; ) span { /*la tag SPAN apparaitra avec l'effet hover*/ a. Info: hover span (/ * SPAN tag will appear with the hover effect * / display: block; position: absolute; top: 18px; left: 10px; / * Elements to position the text in the bubble * / / * You can also use padding: 24px 8px 5px 25px; * / padding-left: 25px; padding-top: 24px; padding-bottom: 5px; padding-right: 8px; width: 205px; height: 45px; / * Style character in the bubble * / ; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-style: italic; font-size: 10px; ; color: # 999999; text-decoration: none; text-align: justify; ) / * For a beautiful background of bubbles with PNG transparency * / >span { a. Info: hover> span ( images/bgInfo .png ) ; background-image: url (images / BGInfo. png); ) span { a. Info: hover span ( ( src= "/images/bgInfo.png" , filter: progid: DXImageTransform. Microsoft. AlphaImageLoader (src = "/ images / bgInfo.png" ; sizingMethod = 'crop'); )
Well, I hope that with this tutorial you will be able to create this bubble effect to 2.0. If you have any questions, feel free to ask on our forum. Good luck!
Tags: Bubble Info, CSS, links, tutorial
February 9, 2008 at 0:07
Interesting, I thank you bookmark the tip!
February 9, 2008 at 0:09
Super convenient this tutorial ... I'm trying it tonight!
If it works, I add you a mark (tutmarks.com) immediately
February 9, 2008 at 0:10
Pity the height does not take into account the content and limiting the use of this balloon friendly a design point of view.
February 9, 2008 at 0:11
It is great to adjust the height according to the text, but it requires more lines of code for that. The code is as simple as possible. But I intend to make a more complex version with automatic adjustment.
February 9, 2008 at 0:13
It's a good thing for an object to be used by as many people as possible, we must curb the least possible (easier said than done:)).
Bravo for your work
February 9, 2008 at 0:13
very nice, very clear, very well
February 9, 2008 at 0:15
tuto is really beautiful thank you beaucaup has its author
February 9, 2008 at 0:15
Wonderful, thank you.
March 28, 2008 at 8:12
Perfect!
The only problem for me is that even with text-decoration: none; I inside the bubble is highlighted by a stroke of the same color as the link (visited or not)
March 28, 2008 at 12:39
Test a border: 0px; or make one! Important line in your text-decoration: none ...
Example:
text-decoration: none;
March 29, 2008 at 9:35
No neither of these works, most of the bubble is cut at the edge of my container, even with a z-index of 20 on the bubble and 2 on the container.
March 29, 2008 at 20:50
Can you give me the URL so I can see your code?
March 30, 2008 at 6:59
The site is normally only locally but I put a truncated version online: xttp: / / xxxxxxx.xxx / claims /
You can click directly on "connection", then left on "guaranteed" then you have an example of the bubble on the right page on the link to the phone.
Thank you for your help;)
March 31, 2008 at 15:30
I looked at the problem of your tooltips in your CSS that cause problem is the overflow-y: auto; in the class. Home
I removed it and it seems to work well if you put an overflow, all that is found in the tag will not overflow and will end up hidden.
I hope that my answer to your problem.
Good day!
July 17, 2008 at 7:55
Genial your tutorial, but is it possible to get this balloon on a picture? I tried, but the tooltip gets in the picture while I put it to the bottom right ... Is that possible?
Thank you
October 20, 2008 at 11:25
Hello, super tutau, but I have a bar menu with ul and li and so I wanted to use the info bubble, but it is cut when it appears! So I do not see a game!
October 26, 2008, 15:04
thanks
October 30, 2008 at 8:14
Hello,
how to put the bubble (with another bubble in the other direction) above the link text, like facebook in the bar at the bottom please?
Thank you ...
Heve
November 6, 2008, 12:48
coooooooooooool!! thank you
December 17, 2008 at 12:06
(subject - display bubble)
Hello
Is it possible to put the link to an image map?
thank you and the great tutorial!
good day!