</head>
el siguiente código
1 2 3 |
<link rel="stylesheet" href="url de tu archivo hint.css"> |
1 2 3 |
<span class="hint--top" data-hint="texto del tooltip">aquí</span> |

1 2 3 4 |
<a href="#" class="hint--top" data-hint="tooltip de prueba"> <img src="http://codictados.com/wp-content/uploads/2014/11/idea_diseno.jpg"/></a> |
Posiciones
Si quieres cambiar la posición en la que se situa el tooltip CSS deberás cambiar la clase
hint--top
por hint-bottom
, hint-left
o hint-right
para que el tooltip CSS salga arriba, abajo, a la izquierda o a la derecha respectivamente
Tooltip CSS hacia arriba
Tooltip CSS hacia abajo
Tooltip CSS hacia la izquierda
Tooltip CSS hacia derecha
Estilo
Aparte de lo ya expuesto esta librería también cuenta con algunas personalizaciones en cuanto a forma y color que se pueden utilizar añadiendo las clases Mensaje de exito de la clase
hint--success
Mensaje de error hint--error
Mensaje de informacion hint--info
Mensaje de peligro hint--warning
Mensaje siempre visible hint--always
Mensaje con esquinas redondeadas hint--rounded
Mensaje sin animación hint--no-animate
Mensaje con diferente animación hint--bounce
Recuerda que para conseguir estos efectos deberemos mezclar la clase del efecto y la clase de la posición del tooltip CSS y que para ello es necesario separarlas con un espacio class="hint--top hint-warning"
. Si esto te sabe a poco y quieres personalizar un poco más este tipo de tooltips te invito a que modifiques el fichero hint.css y crees tu propio estilo.
Really appreciate you sharing this post.Thanks Again. Really Great. bbdeffeegccagkda
Thank you for comment!
¡Hola!:
¡Muchísimas Gracias!, excelentemente explicado.
Saludos Cordiales
De nada Jorge, me alegra que te haya servido 🙂