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

  • Regular Expressions for the Rest of Us

    Sooner or later you’ll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

  • Detect DOM Node Insertions with JavaScript and CSS Animations

    I work with an awesome cast of developers at Mozilla, and one of them in Daniel Buchner. Daniel's shared with me an awesome strategy for detecting when nodes have been injected into a parent node without using the deprecated DOM Events API....

Incredible Demos

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

  • Loading Static Templates for Intern Testing

    I use Intern by SitePen for all of my JavaScript functional testing.  Intern has loads of features other functional test frameworks don't and it's completely Promise-based -- something I got very used to when I used the Dojo Toolkit every day. Async test creation can...

  • Convert Video to mp3

    Let's all be honest for a moment:  we've all ... not paid for ... music.  Whether it was via a file sharing app like Kazaa or Napster, or it was downloading and seeding on bittorrent, or maybe even downloading a music video and ripping its audio,...

  • Sort git Branches by Date

    I'll be first person to admit I don't do as much git repository maintenance as I should.  I rarely delete branches which have been merged, so a git branch execution shows me a mile-long list of branches that likely aren't relevant.  The best way to find branches I've recently...

  • Best Tools and Resources for Web Professionals in 2015

    Looking for the right resources to help you satisfy the needs of your clients? On the lookout for the best tools to help you increase your revenue? Searching for the right software to help you improve your business? Well, then you’ve come to the right place....

  • JavaScript Polling

    Polling with JavaScript is one of those ugly but important functions within advanced front-end user experience and testing practices.  Sometimes there isn't the event you can hook into to signify that a given task is complete, so you need to get your hands dirty and simply poll for...