Facebook 中Tooltip的HTML和CSS

发布于大漠

13 年前

我一直在扣facebook前端代码，今天扣了一段有关于Tooltip的HTML和CSS。Tooltips的制作方法很多，但主要是我认为他的tooltip很轻巧，很优雅：

下面把这个tooltips的HTML和CSS代码贴上来与大家分享：

HTML Markup

上图这个Tooltips的HTML结构主要包括五个要素：

		<div class="uiContextualDialogPositioner uiContextualDialogLeft" style="top: 20px; left: 600px;">
		  <div class="uiOverlay uiContextualDialog uiOverlayArrowRight" style="width: 347px; top: 0px; ">
		    <div class="uiOverlayContent">
		      <div class="uiOverlayContentHolder">
		        {content here}{content here}{content here}{content here}{content here}{content here}{content here}{content here}{content here}
		      </div>
		    </div>
		    <div class="uiOverlayArrow" style="top: 15px; margin-top: 0px;"></div>
		  </div>
		</div>

div.uiContextualDialogPositioner：这个是tooltips的根元素，主要用来决定tooltips的位置，这里我们可以通过另外一个类名来控制其方向性，比如说这里扣来的实例是“uiContextualDialogLeft”；
div.uiOverlay:这个是“：div.uiContextualDialogPositioner”元素的唯一子元素，主要用来控制tooltips的宽度，这个元素包含两部分：内容和箭头
div.uiOverlayContent：这个元素主要用来放置tooltip的内容；
div.uiOverlayArrow：这个元素是用来制作tooltips的箭头
div.uiOverlayContentHolder：这个元素是“div.uiOverlayContent”的子元素，我们在“div.uiOverlayContent”加上这个子元素所起的作用就是用它来控制元素的内容和设置padding不响影tooltip的宽度。

CSS Code

上面我们了解了结构，下面我们来看实现的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;
		}

上面这段代码是用来制作tooltip的，但具体如何控制tooltip显示和隐藏我们需要使用js或者jquery来实现。如果你的js或jquery强大，完全可以配合整出一个这样的tooltip插件。我这里只是扣出这部分HTML和CSS代码以供大家参考，喜欢的可以到facebook上查看这方面的效果。希望大家喜欢。

如需转载烦请注明出处：W3CPLUS

Nike Shox TLX 0018