Con este ejemplo práctico vamos a mostrar un tooltip, hint o texto de ayuda con solo unas pocas líneas de código CSS.

Este recurso es muy útil cuando queremos añadir una pequeña aclaración, pero sin tener que añadir un párrafo y sin que resulte molesto. Bastará con añadir el tooltip y marcar la zona con un subrayado por ejemplo, para dar a entender que ahí hay algo.

Veamos un ejemplo:

La profesión con más demanda en 2014 y 2015 Según un estudio publicado por el centro de estudios CEAC fue la de programador web, seguido por programador de software.

El código que necesitamos es sencillo:

HTML

La 
profesión con más demanda en 2014 y 2015 
Según un estudio publicado por el centro de estudios CEAC
 
fue la de programador web, seguido por programador de software.

CSS

.css-tooltip {
	position: relative !important;
	display: inline-block !important;
	text-decoration: none !important;    
}
.css-tooltip span {
	min-width: 180px;
	font-family: arial, sans-serif !important;
	font-size: 13px !important;
	line-height: normal !important;
	text-align: left !important;
	padding: 10px 10px 12px 10px !important;
	visibility: hidden;
    opacity: 0;
	position: absolute;
	z-index: 9999999 !important;
	color: #ffffff !important;	
	background: #c34722; 
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	left: -10px;
	bottom: 100%;
	margin-bottom: 30px;
}
.css-tooltip span:before {
	content: "";
	display: block;
	width: 0px;
	height: 0px;
	position: absolute;
	border-color: #c34722;
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
	border-top: 8px solid #000;
	border-bottom: 0 !important;
	bottom: -8px;
	left: 15px;
}
.css-tooltip:hover span {	
	margin-bottom: 10px;
	visibility: visible;
	opacity: 1;
}
.css-tooltip span:after {
	content: "";
	display: block;
	border-top: 1px solid #e28266;
	position: absolute;
	left: 0px;
	top: 1px;
	width: 100%;
	height: 10px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

Se puede añadir alguna transición para hacerlo más estético, así como un degradado. El código de mi ejemplo se puede descargar de aquí.

Fuente: W3lessons