Foro:
[Tutorial] Como crear un ToolTip en css. Publicado 28-07-2013 00:31:29 | Editado 28-07-2013 00:32:28
Para empezar, os explico xD.
Un tooltip es una ventana Emergente que aparece al pasar el ratón sobre una letra, texto, menú etc.
Mas simple es: Aparece un mensaje cuando se pasa el ratón, igual que cuando lo dejas un rato para ver el historial Sala.
En este tutorial (Os dejo la imagen del código y vosotros lo montáis xD.
Antes de nada, este es el resultado:
1- Creamos un archivo HTML o PHP
En mi caso he creado un archivo PHP porque yo tengo un servidor en mi pc (para desarrollo de mis cosas) en este caso Xampp. Si tu no tienes, lo mejor es que crees un archivo HTML.
Dentro de este, entre las etiquetas "<head>" y "</head>" deberemos llamar al archivo CSS.
En el interior del cuerpo ("<body>" y "</body>") Pondremos un texto y lo más importante un "<a href="#" data-tooltip="Habbo Happy"> Texto aquí </a>", para que el tool tip aparezca (Habbo Happy es el texto que aparecerá al pasar el ratón).
2- Crear el archivo CSS
Deberemos crear un archivo css (nombrearchivo.css) dentro de la misma carpeta que el anterior archivo.
Dentro de este, escribes lo que se muestra en la imagen:
Y con esto tendrás un tooltip en css, normalmente para hacer tooltips se usa JavaScript.
Si tenéis alguna pregunta, decirlo en este post.
Perdonen por la mala calidad de las imágenes.
El código lo subiré a internet cuando pueda, ya que actualmente uso el internet del móvil (estoy de vacaciones en la casa de campo xD) y no tengo muchos KB/s que digamos...
Un saludo,
Marty
Un tooltip es una ventana Emergente que aparece al pasar el ratón sobre una letra, texto, menú etc.
Mas simple es: Aparece un mensaje cuando se pasa el ratón, igual que cuando lo dejas un rato para ver el historial Sala.
En este tutorial (Os dejo la imagen del código y vosotros lo montáis xD.
Antes de nada, este es el resultado:
1- Creamos un archivo HTML o PHP
En mi caso he creado un archivo PHP porque yo tengo un servidor en mi pc (para desarrollo de mis cosas) en este caso Xampp. Si tu no tienes, lo mejor es que crees un archivo HTML.
Dentro de este, entre las etiquetas "<head>" y "</head>" deberemos llamar al archivo CSS.
En el interior del cuerpo ("<body>" y "</body>") Pondremos un texto y lo más importante un "<a href="#" data-tooltip="Habbo Happy"> Texto aquí </a>", para que el tool tip aparezca (Habbo Happy es el texto que aparecerá al pasar el ratón).
2- Crear el archivo CSS
Deberemos crear un archivo css (nombrearchivo.css) dentro de la misma carpeta que el anterior archivo.
Dentro de este, escribes lo que se muestra en la imagen:
Y con esto tendrás un tooltip en css, normalmente para hacer tooltips se usa JavaScript.
Si tenéis alguna pregunta, decirlo en este post.
Perdonen por la mala calidad de las imágenes.
El código lo subiré a internet cuando pueda, ya que actualmente uso el internet del móvil (estoy de vacaciones en la casa de campo xD) y no tengo muchos KB/s que digamos...
Un saludo,
Marty
