O'Reilly

Facebook Tooltip HTML and CSS

By on  
Facebook Tooltip

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!

Track.js Error Reporting

Upcoming Events

Recent Features

  • An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

  • 7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

Incredible Demos

  • Custom Scrollbars in WebKit

    Before each of the browser vendors we like was providing unique CSS controls, Internet Explorer was setting the tone.  One such example is IE's early implementation of CSS filters. Internet Explorer was also the first browser that allowed developers to, for better or worse, customize...

  • jQuery Comment Preview

    I released a MooTools comment preview script yesterday and got numerous requests for a jQuery version. Ask and you shall receive! I'll use the exact same CSS and HTML as yesterday. The XHTML The CSS The jQuery JavaScript On the keypress and blur events, we validate and...

Discussion

  1. 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!

  2. 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.

  3. My only reservation about not using a framework is calculating element position. I may be able to rip that piece out of MooTools though.

  4. 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.

    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./embedded/”>
  5. jQuery Plugin ++ I’ll definitely look forward for the upcoming plugin.

  6. Cassy

    Cool!
    Can you make a jQuery version of this?

  7. The fact that everyone wants a jQuery version makes me think it should be framework independent.

    Am I the only one who hates jQuery?

  8. AlK

    @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).

  9. Tim

    It should show/hide with css3, but with a fallback to JS (preferrably 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 of rgba ;-)

  10. Ron

    I’d like to see it in jQuery. This is a very nice looking tooltip.

  11. Erik

    jQuary would be a good choice!
    Thanks for a great blog!

  12. chris

    please do it as dojo toolkit feature

  13. Astrandai

    I would love to see this being created in mootools.

  14. 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.

  15. Klaus

    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.

  16. Roark

    Hey David,

    I vote for a Mootools version because Mootools is the Sh*T!

  17. Hey David! Plz, tell me, how to use this tooltip? I`m noob…. Thanks.

  18. I vote for a jQuery plugin version.

  19. yep, jquery version would be nice,

  20. Roark

    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/

  21. I vote for a Javascript Version, I’ll try the jQuery/Mootools on my own
    Thanks

  22. A Jquery version of this would rock !!!!

  23. thanks, I’ll try this,,,

  24. Thanks for your effort for revealing the code structure. I looked at the css codes and took some stuff to try on my website.

  25. 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 :/

  26. 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?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Get Node.js Command Line Arguments with yargs

    Using command line arguments within Node.js apps is par for the course, especially when you're like me and you use JavaScript to code tasks (instead of bash scripts).  Node.js provides process.argv but that doesn't provide a key: value object like you'd expect: Bleh.  If you want to work with a...

  • OâReilly Velocity Conference â New York

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • Free Download: Font Bundle Featuring 17 Incredible Typefaces

    The only thing we love more than a good font, is a good free font. So we’ve combed the Web for some of our favorite free fonts, and gathered them here in a single download. You’ll find a variety of useful typefaces, from highly geometric designs...

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • CanIUse Command Line

    Every front-end developer should be well acquainted with CanIUse, the website that lets you view browser support for browser features.  When people criticize my blog posts for not detailing browser support for features within the post, I tell them to check CanIUse:  always up to date, unlike...