Indice
Precentacion y Informacion sobre el post
Advertencia sobre comentarios fuera de lugar
Demo
Empezando el tutorial (HTML)
Poniendo estilo (CSS)
Final del post
Presentación!
Hola! soy @boca_97 y en este post les voy a enseñar a crear un tooltip originalmente se hace con jquery, pero para algunos
que no saben jquery se les hace muy dificil (como yo) por es vamos a usar CSS3 para crearlo .
Advertencia sobre los comentarios!
Por favor eviten los comentarios ofensivos yo no los insulte en ningún momento por ende no quiero que insulten por lo menos repeten que me hicieron cambiar el patrón de colores que llevaba ¬¬ (?
Empezando tutorial (HTML)
[/url]
Bueno empecemos vamos a poner los elementos basicos de HTML explico rapidito que es cada uno:
Body: cuerpo.
Head: cabeza o cabecera.
Title: titulo.
Y adentro del body vamos a poner algo cualquier cosa pero OJO! : vamos a poner un hipervinculo en la palabra que queramos que aparezca el tooltip asi:
No tengo idea porque se ve tan chico asi que se los dejo en code
[color=#000000]
<p>Hola esto es un tutorial de boca_97 no te olvides Recomendar :D</p>
<p>Mas texto y sus alabansas a herni (? blablablabla y quiero que esto se el tooltip= <a href="#" class="tooltip" title="Esto es un tooltip">RECOMIENDEN</a></p>
[/color]
eso seria todo el html ahora vamos a darle estilo
Poniendo estilo (CSS)
[/url]
Para enlazar estilo y/o archivo css hay que poner el el head esto:
Bueno y ahora explicar que es cada uno pero antes de explicarles tienen que saber que tienen que poner solo 1 ok! porque vamos a usar uno solo si ustedes necesitan mas ahi seria cosa suya
<link rel='stylesheet' type='text/css' href='estilo.css'/> : esto se usa si el archivo css esta en la misma carpeta el nombre del css va en href='aca el nombre'
<link rel='stylesheet' type='text/css' href='css/estilo.css'/> : esto se usa si el archivo esta en una carpeta ejemplo: en esta carpeta esta el index.html entonces creo otra que diga css quedaria asi href='carpeta/archivo.css'
<link rel='stylesheet' type='text/css' href='../css/estilo.css'/> : esto es por si esta en una carpeta anterior por eso se pone el "../" eso le indica al navegador que retroseda una carpeta y en este caso entre a otra para poder encontrar el css
<style>aca el estilo</style> : esto se usa por si no queres usar ningun archivo (recomendado para empezar con css) por eso se pone el <style></style> y adentro de las etiquetas va el estilo
aclarado estos puntos vamos a seguir en mi caso voy a usar la ultima opcion simplemente porque me da fiaca crear un archivo bueno vamos a empezar, como pusimos un class="" con el valor de tooltip vamos a poner en el css
[color=#000000]
.tooltip
{
}
[/color]
Lo que hace el punto es decirle al navegador que ese estilo y todo lo que este adentro de el va a ser de la etiqueta que tenga el valor de tooltip y adentro vamos a poner esto
En el navegador se ve asi
Perdon el error ahi
Parece que no hay cambio pero es importante
Ahora vamos a poner un Hover ¿Que es un hover? un hover es cuando pasas el puntero por dicho lugar en este casi la palabra
En el navegador
Lo siguiente que vamos hacer es añadir el after al hover asi:
Vista en el navegador:
ya va tomando forma 
(? bueno lo siguiente que vamos a poner la "colita" por decirlo de algun modo
(? bueno lo siguiente que vamos a poner la "colita" por decirlo de algun modoVista previa y final en el navegador: