Treehouse

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!

ydkjs-1.png

Recent Features

  • Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event,...

Incredible Demos

  • Create a NoScript Compatible Select Form Element with an onChange Event

    I wouldn't say that I'm addicted to checking Google Analytics but I do check my statistics often. I guess hoping for a huge burst of traffic from some unknown source. Anyway, I have multiple sites set up within my account. The way to...

  • JavaScript Copy to Clipboard

    Providing your users the ability to copy text to the clipboard can make your website much more convenient and valuable. Unfortunately Flash 10 broke most of the methods for doing so. Luckily a great library named ZeroClipboard exists. ZeroClipboard uses a pinch...

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!