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!