Un tooltip con HTML dentro nos puede servir para distintas cosas como por ejemplo colocar imágenes o un mensaje importante para el usuario e incluso para darle tips de que hacer. Para crear este tooltip utilizaremos únicamente CSS, si deseas puedes ver el resultado que tendríamos al final de este tutorial. Primero tendríamos que crear un enlace y dentro de el otra etiqueta contenedora la cual tendrá el HTML, ya sea imágenes o texto como lo viste en el ejemplo. Tooltip con HTML 
Titulo
Texto del tooltip
Aquí mas texto
Con esto tendríamos el tooltip personalizado y con HTML integrado dentro de el como ya lo mencionamos podemos colocar imágenes, y otras etiquetas HTML. Igual que anteriormente colocamos el CSS pero con más estilos personalizados. a.tooltip-2 span { cursor:default; display:none; padding:5px; margin-left:8px; width:500px; /*Ancho del tooltip*/ position:relative; z-index:9; } a.tooltip-2:hover span{ display:inline; position:absolute; /*Background con degradado*/ background: rgb(58,58,58); background: -moz-linear-gradient(top, rgba(58,58,58,1) 0%, rgba(0,0,0,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(58,58,58,1)), color-stop(100%,rgba(0,0,0,1))); background: -webkit-linear-gradient(top, rgba(58,58,58,1) 0%,rgba(0,0,0,1) 100%); background: -o-linear-gradient(top, rgba(58,58,58,1) 0%,rgba(0,0,0,1) 100%); background: -ms-linear-gradient(top, rgba(58,58,58,1) 0%,rgba(0,0,0,1) 100%); background: linear-gradient(to bottom, rgba(58,58,58,1) 0%,rgba(0,0,0,1) 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3a3a3a', endColorstr='#000000',GradientType=0 ); /*Termina background con degradado*/ border:3px solid #cccccc; color:#ddd; text-shadow:0px 0px 1px #fff; font-size:14px; font-weight:normal; opacity:0.9; box-shadow: 0 25px 10px -23px rgba(0, 0, 0, 0.7); /*Sombra del tooltip*/ } /*Estilo y poscion de imagen*/ a.tooltip-2 span img { float:right; display:block; margin:3px 5px; border:3px solid #ccc; } /*Estilo del titulo en el tooltip*/ .title-tooltip { margin:0px; color:#FFF; font-size:23px; text-shadow:1px 1px 0px #000; text-align:center; } Teniendo ya esto obtendríamos un tooltip más personalizado igual que el primer ejemplo que nos serviría para colocar información sobre un tema o bien como ya lo mencione para ayudar al usuario a navegar mejor por la web. En el tutorial completo, muestran dos tipos de tooltip, por si te interesa conocer el otro.