Facebook Tooltip HTML and CSS
Facebook recently implemented a new, lighter tooltip. I say the tooltip is lighter because it seems a lot quicker and more elegant than their previous effort. I took a few moments to grab the HTML structure and CSS rules to see how they did it.
The HTML
The tooltip structure consists of five elements:
{content here}{content here}{content here}{content here}{content here}{content here}{content here}{content here}{content here}
The root element dictates the position of the tooltip (which is most likely injected to the body). The sole child element controls the width of the tooltip. That element contains two elements: the content container and the and the arrow node (which I've changed from an I element to a DIV). The last, innermost DIV element will hold the content and provide padding.
The CSS
The CSS to create the tooltip layout is actually very minimal:
body {
font-size: 11px;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
color: #333;
line-height: 1.28;
text-align: left;
direction: ltr;
}
.uiContextualDialogPositioner, .uiContextualDialogPositioner .uiContextualDialog {
position: absolute;
z-index: 200;
}
.uiContextualDialogLeft .uiContextualDialog {
right: 0;
}
.uiOverlayArrowRight {
padding-right: 10px;
}
.uiOverlay {
position: relative;
z-index: 200;
}
.uiContextualDialog, .uiContextualDialog:focus {
outline: 0 solid transparent;
}
.uiOverlayContent {
background: white;
border: 1px solid #8C8C8C;
border: 1px solid rgba(0, 0, 0, .45);
border-bottom: 1px solid #666;
-moz-box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
position: relative;
}
.uiOverlayContentHolder {
padding: 10px;
}
.uiOverlayArrow {
position: absolute;
overflow: hidden;
}
.uiOverlayArrowRight .uiOverlayArrow {
background-image: url(sprite.png);
background-repeat: no-repeat;
background-position: -177px -309px;
height: 16px;
right: 2px;
width: 9px;
}
The content pane contains the majority of the CSS rules, include the box-shadow and border, both of which use rgba color for a more detailed effect. Showing and hiding of the tooltip may be done via CSS key-frames or JavaScript -- the choice would be up to the individual implementing the tooltip.
Why Show This?
Two reasons. The first is that I appreciate well-coded features like this. The second, more important reason, is that I'll be creating a JavaScript-powered version of this functionality which accounts for content size, position on page, stacking/z-index management, etc. Do I create as a jQuery and MooTools plugin? Do I create it as a standalone JavaScript project. Let me know your thoughts!
I think a standard JS example.
There are hundreds of jQuery/MooTools examples of this kind of thing, but far fewer in pure JS. This means that people tend not to understand the basics as much (myself included).
JS is harder to write, understand and explain. There are very few quality articles written describing this kind of functionality. Given that you tend to explain things very simply and clearly it would be of the greatest benefit for you to give us the JS only version.
Whatever you decide, looking forward to it!
I have my own version of facebook tooltip with demo.
I just copied the facebook css
http://tutorials-edongkoy.blogspot.com/2011/12/facebook-tooltip-tutorial.html
Taking a page out of the shadowbox book, I think standalone with the ability to use a framework is the best, but that may be overkill in this case. That being said, MooTools FTW.
Easy themeing is a must.
My only reservation about not using a framework is calculating element position. I may be able to rip that piece out of MooTools though.
Yes, do it! Both frameworks!
My selfish reason is that I have these tooltips which I like, but require jQuery UI’s position function. I LOVE jQuery UI’s position function but that seems like a bit much to require for a little tooltip plugin. I’d rather calculate position somehow internally in the plugin.”>http://jsfiddle.net/chriscoyier/EMhRJ/228/” rel=”nofollow”>these tooltips which I like, but require jQuery UI’s position function. I LOVE jQuery UI’s position function but that seems like a bit much to require for a little tooltip plugin. I’d rather calculate position somehow internally in the plugin.
jQuery Plugin ++ I’ll definitely look forward for the upcoming plugin.
Cool!
Can you make a jQuery version of this?
The fact that everyone wants a jQuery version makes me think it should be framework independent.
Am I the only one who hates jQuery?
@Brad: nope, you’re not alone! :)
Make it standalone with functions calculating the position easy to replace with any framework (the dev who’ll want to use it with his framework will know how to improve it anyway).
It should show/hide with css3, but with a fallback to JS (preferably MooTools).
Right now my eyes just opened to what’s the point of use of
rgba()o_o” stupid me! It’s the RGB color and alpha in one, instead of a loose opacity property! Thanks David for letting me see the light ofrgba;-)I’d like to see it in jQuery. This is a very nice looking tooltip.
jQuary would be a good choice!
Thanks for a great blog!
please do it as dojo toolkit feature
I would love to see this being created in mootools.
To be honest, there are a lot of JQuery sites and plugins, whilst Mootools is falling out of the spotlight. As this is one of the few Mootools orientated sites, I’d be all for seeing a Mootools version.
a clean and not oversized jQuery version would be great!
of cource there are already a lot of plugins out there, but they are full of useless options. this one could be a nice and small plugin with one special goal.
Hey David,
I vote for a Mootools version because Mootools is the Sh*T!
Hey David! Plz, tell me, how to use this tooltip? I`m noob…. Thanks.
I vote for a jQuery plugin version.
yep, jquery version would be nice,
So I’m back, and while I voted for a Mootools version, I thought I’d go ahead and try my luck at a writing my own class in Mootools.
foreword:
It doesn’t yet take into account “content size, position on page, stacking/z-index management, etc”, also not tested in anything else other than FF.
You wont be able to see the arrow, but it does work using a sprite image from FB.
Please have a look, fork it, fix it and
PLEASE let me know in comments where I have made mistakes I know I have, and maybe all of us can learn.
Lastly thank you David, I ripped code from lightface, and a couple others to try get it right. this blog is the best resource for pushing your Mootools skill thank you!
http://jsfiddle.net/roark/952qG/3/
I vote for a Javascript Version, I’ll try the jQuery/Mootools on my own
Thanks
A Jquery version of this would rock !!!!
thanks, I’ll try this,,,
Thanks for your effort for revealing the code structure. I looked at the css codes and took some stuff to try on my website.
Thanks! I appreciate good code too and use facebook a lot for design inspiration. Did you happen to make this JQuery Library? I am implementing a very similar sidebar on my site too and it would be very useful to have!
Haven’t had a chance to yet John Paul! I started but wasn’t able to finish :/
David, this was excellent learning for me. Did you ever finish that JavaScript-powered (JQuery) version of this functionality which accounts for content size, position on page, stacking/z-index management, etc?