Tooltips como los de Facebook con CSS y HTML

Una de las características más reconocibles de Facebook que lo hacen más ligero y sobretodo, mucho más usable son sus tooltips. Los tooltips es una manera rápida de acceder a la información que el usuario demanda sin hacer ni un solo click en la pantalla. Soy muy fanático de las redes sociales, y de Facebook en particular, es por eso que me tomé un momento para observar la estructura HTML y las reglas CSS para ver cómo lo habían implementado. Y es que ya sabéis que el programar es curioso por naturaleza.

El HTML

La estructura del tooltip consta de cinco elementos:

<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>

El elemento raíz dicta la posición del tooltip (que es lo que se inyecta al cuerpo). El único elemento secundario controla el ancho del tooltip. Este elemento contiene dos elementos más: el content container y el arrow node (que he cambiado de un elemento I a un DIV). El último, el elemento DIV más interno albergará contenido y proporcionará un padding.

El CSS

El CSS para crear el diseño del tooltip es en realidad muy breve:

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;
}

El content panel contiene la mayoría de reglas CSS, incluye el box-shadow y el border, ya que ambos utilizan un color RGBA para un efecto más detallado. Mostrar y ocultar el tooltip se puede realizar a través de frameworks CSS o JavaScript. Eso en realidad, lo dejamos a tu elección, pero siempre contempla la opción que menos recursos implique.

Y este ha sido el tutorial sobre cómo crear tooltips como los de Facebook con CSS y HTML, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP