facebook注册工具_Facebook工具提示HTML和CSS

facebook注册工具

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.

Facebook最近实施了一个新的，更轻松的工具提示。 我说工具提示更轻巧，因为它看起来比以前的尝试更快，更优雅。 我花了一些时间来了解HTML结构和CSS规则，看看它们是如何做到的。

HTML (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.

根元素决定了工具提示的位置(最有可能注入到身体中)。 唯一的子元素控制工具提示的宽度。 该元素包含两个元素：内容容器和和箭头节点(我已将其从I元素更改为DIV)。 最后一个最里面的DIV元素将保存内容并提供填充。

CSS (The CSS)

The CSS to create the tooltip layout is actually very minimal:

创建工具提示布局CSS实际上非常少：

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.

内容窗格包含大多数CSS规则，包括box-shadow和border，它们都使用rgba颜色以获得更详细的效果。 工具提示的显示和隐藏可以通过CSS关键帧或JavaScript进行-选择取决于个人实现工具提示。

为什么要显示这个？ (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!

有两个原因。 首先，我喜欢这种编码良好的功能。 第二个更重要的原因是，我将创建此功能JavaScript驱动版本，该版本考虑内容大小，页面位置，堆叠/ z索引管理等。我是否创建为jQuery和MooTools插件？ 我是否将其创建为独立JavaScript项目。 让我知道你的想法！

翻译自: https://davidwalsh.name/facebook-tooltip

facebook注册工具