A tool tip on the links in CSS
Here's how to create bubbles of information in CSS. These bubbles have the same style as those of websnapr This website takes screenshots of applications it receives, then it stores them in a database . They have a fixed height and width, which limits the number of characters to insert.
An example of these bubbles
What is a graphical exquisite corpse is a graphical composition that follows and you never know what you will. ?
Here is what the PNG image to create this information bubble looks like. This overview was directly caught up in photoshop.
Click here to download the real image
Now here's the code to create 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
a. info { position: relative; / * Very important * / background: none; / * Important to the operation of 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 {/ * the 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; } / * For a nice bubble background with transparent PNG * / >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 to 2.0. If you have any questions, feel free to ask on our forum . Good luck!
Tags: Bubble info , CSS , links , Tutorial
February 9th, 2008 at 0:07
Interesting, I thank you bookmark the pipe!
February 9th, 2008 at 0:09
Super convenient this tutorial ... I test tonight!
If it works, I add you a mark (tutmarks.com) as soon
February 9th, 2008 at 0:10
Too bad the height does not take into account the content, thus limiting the use of this friendly tip from a design point of view.
February 9th, 2008 at 0:11
It is well to adjust the height according to the text, but it involves more line of code for that. The code is as simple as possible. But I intend to do a more complex version with automatic adjustment.
February 9th, 2008 at 0:13
This is good for an object to be used by many people as possible, it must restrain the least possible (easier said than done:)).
Bravo for your work
February 9th, 2008 at 0:13
very nice, very clear, very well
February 9th, 2008 at 0:15
is really wonderful tutorial thank you beaucaup the author has
February 9th, 2008 at 0:15
Superb, thank you.
March 28, 2008 at 8:12
Perfect!
The only problem for me is that even with text-decoration: none; I content of the bubble which is highlighted by a stroke of the same color as the link (visited or not)
March 28, 2008 at 12:39
Testing a border: 0px; or put a! Important line of your text-decoration: none ...
Example:
text-decoration: none! important;
March 29, 2008 at 9:35
Not any of the two proposals do not work, over the bubble is cut at the edge of my container, even with a z-index of 20 on the bubble and 2 of 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 / sinister /
You click directly on "connection", then left on "insured" then you have an example of the bubble on the right page on the link 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 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 end up hidden.
I hope my answer to your problem.
Good day!
July 17th, 2008 at 7:55
Genial your tutorial, but is it possible to put this image on a balloon? I tried, but the tooltip gets in the picture while I snaps into the bottom right ... Is this possible?
Thank you
October 20th, 2008 at 11:25
Hello, super tutau, but I made a menu bar with ul and li etc. and I wanted to use the tool tip, but it is cut when it appears! So I do see a small part!
October 26th, 2008 at 15:04
thanks
October 30th, 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 at 12:48
coooooooooooool!! thank you
December 17, 2008 at 12:06
(Topic - display bubble)
Hello
is it possible to put the link on an image map?
thank you and the awesome tutorial!
good day!