A bubble of info on links in CSS
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 he stocks in a database . They have a fixed height and width, which limits the number of characters to insert.
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 for the creation of this information bubble looks like. This preview was taken directly in photoshop.
Click here to download the real image
Now, here is the code for creating this information bubble
The HTML
<a href="votreDestination" class="info"> The name of your link <span> description of your link with a maximum of 130 character in this case if </ span> </ a>
The CSS
was. info ( position: relative; / * Very important * / background: none; / * Important for functioning on IE * / z-index: 10; ) { was. Info: hover ( z-index: 20; ) was. info span ( display: none; ) span { /*la tag SPAN apparaitra avec l'effet hover*/ was. 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 25px 5px 8px; * / padding-left: 25px; padding-top: 24px; padding-bottom: 5px; padding-right: 8px; width: 205px; height: 45px; / * Style of 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; ) / * To have a beautiful background of bubbles with PNG transparency * / >span { was. Info: hover> span ( images/bgInfo .png ) ; background-image: url (images / BGInfo. png); ) span { was. 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 hose!
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 of a sympathetic design point of view.
February 9, 2008 at 0:11
It is great to adjust the height according to the text, but that 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, it must rein in 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
tutorial is really beautiful thank you beaucaup 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 which is underlined by a stroke of the same color as the link (visited or not)
March 28, 2008 at 12:39
Testing a border: 0px; or make one! Important line in your text-decoration: none ...
Example:
text-decoration: none! important;
March 29, 2008 at 9:35
Not any of the two proposals is not working, over 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 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 click directly on "connection", then left on "guaranteed" then you have an example of the bubble on the right page link on the phone.
Thank you for your help;)
March 31, 2008 at 15:30
I looked at the problem of your tooltips in your CSS problem that is causing 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 be found 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 put this tooltip on an image? I tried, but the tool tip gets in the picture, so I want it snaps into the bottom right ... Is that possible?
Thank you
October 20, 2008 at 11:25
Hello, super tutau, but I made a bar menu with ul and li and so I wanted to use the info bubble, but it is cut when it appears! Suddenly I do not see a game!
October 26, 2008 at 15:04
thanks
October 30, 2008 at 8:14
Hello
how to put the bubble (with another bubble in the other direction) over the link text, the way 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
(Topic - display bubble)
Hello
Is it possible to put the link to an image map?
thank you and the great tutorial!
good day!