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

Recent Features

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

  • 9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

  • Create a Twitter AJAX Button with MooTools, jQuery, or Dojo

    There's nothing like a subtle, slick website widget that effectively uses CSS and JavaScript to enhance the user experience.  Of course widgets like that take many hours to perfect, but it doesn't take long for that effort to be rewarded with above-average user retention 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

  • Serve a Directory via Python

    Sometimes I'm working with a test HTML file and some JavaScript but need to work off of a served space.  In that case, I sometimes need to swap out folders within MAMP Stack which leads to a maintenance nightmare.  Bleh. I recently found out that you can...

  • OSCON Portland:  Conference  Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...