Ir al contenido principal

Como hacer un Tooltip con Css

Imagen
De
Hay muchas maneras de crear un Tooltip personalizado con CSS dependiendo de que tipo de Tooltip queramos, en este artículo mostrare dos formas.

- Mostrando una imagen, texto, URL


<!DOCTYPE HTML>             

<style type="text/css">
    .franz{
        position:relative;
    }

    .franz span{
        display:none;
    }

    .franz:hover span{
        display:block;
        position:absolute;
        top:-30px;
        left:25px;
        border:1px solid black;
        background:olive;
        width:300px;
    }
</style>

<span class="franz">
    <label>Esto es un ejemplo</label>
    <span>Texto que aparece !</span>
</span>

Detalle del código anterior :
  • La línea 1 es necesaria para que funcione en todas las etiquetas el selector hover en IE7. 
  • En la línea 26 se pone el texto que va aparecer y desaparecer. 
  • En la línea 25 está el texto en donde tenemos que pasar el cursor para que aparezca el tooltip. 
  • De la línea 9 a 11 indica que el texto que aparecerá y desaparecerá comenzará como invisible("display:none"). 
  • De la línea 13 a 21 indica que cuando pongamos el cursor sobre el texto indicado en la línea 25 el tooltip aparecerá("display:block") y cuando la quitemos desaparecerá. 
  • la línea 15 indica que el elemento debe ser de posición absoluta con respecto al "span" de la línea 24. 
  • En la línea 26 también se pudo poner en vez de una etiqueta "span" una etiqueta img con la imagen que queramos("<img src='miImagen.jpg' />") , claro que deberíamos cambiar el valor de top y left de la línea 16 y 17 para acomodar bien la imagen donde queramos y también la línea 13 cambiandolo a " .franz:hover img " .
Demostración:
Texto que aparecerá          ----->  Aparece un texto cuando se pasa por encima el cursor

-Mostrando una imagen con un texto interno

Ejemplo:
<!DOCTYPE html>

<style type="text/css">
span.franz{ 
    position: relative;
}

span.franz span{
    display: none;
}

span.franz img{
    display: none;
}
 
span.franz:hover img{
    display: block;
    position: absolute;
    top: -65px;
    left: -30px;
}
 
span.franz:hover span.frtool {
    display: block;
    position: absolute;
    top: -50px;
    left: -15px;
}
</style>

<span class="franz">
    <label>Franz Tooltip</label>
    <img src="Imagen.png" >
    <span class="frtool">¡Hola que tal!</span>
</span>
Demostración:
Franz Tooltip ¡Hola que tal!----->  Aparece un texto cuando se pasa por encima el cursor

Comentarios

Publicar un comentario

Entradas populares de este blog

Validar campo de texto sólo letras, números con javascript

De
En algunos casos necesitaremos que el usuario ingrese solamente letras en un campo de texto, impidiendo así el ingreso de números y caracteres especiales. Gracias a Javascript y HTML esto puede ser posible.   Método 1:  Podemos utilizar el atributo onkeypress devolviendo el valor de false, si es que se escribe un caracter distinto a la cadena que hemos definido (para el ejemplo es " áéíóúabcdefghijklmnñopqrstuvwxyz").   Método 2: Pasos a seguir: Crear una lista con todas las letras permitidas (a,b,c ... etc). Crear una lista de teclas especiales tales como (BackSpace , flecha izquierda, flecha derecha, Supr) estas son teclas permitidas aparte de las teclas permitidas en el primer paso.     Entendiendo el código En la línea 4 la sentencia String.fromCharCode(key) obteniene el caracter presionado por el usuario que añadiendo la sentencia toLowerCase() convertiríamos la letra a minúscula. Con esto guardamos la letra presionada por el usuario en la variabl
109 comentarios
Read more »

La propiedad Disabled en Javascript

De
Como atributo de un elemento HTML Ejemplo: "Solo añadiendo el atributo disabled". < input type = "button" value = "Desactivado" disabled /> < input type = "text" disabled /> < input type = "button" value = "Boton normal" /> Demostración: El botón y el campo de texto están desactivados Manipulando Disabled usando Javascript Ejemplo 1: Utilizando el "id" del campo de texto en este caso "miText". < script type = "text/javascript" > function Desactivar () { document . getElementById ( 'miText' ) . disabled = true ; } < /script > < input type = "button" value = "Desactivar" onclick = "Desactivar()" / > < input type = "text" id = "miText" / > Demostración: Dándole clic al botón se desactiva el campo de texto. Ejemplo 2:Utilizando el event
2 comentarios
Read more »

Validar campo de texto con javascript

De
Obligar al usuario a introducir un valor en un campo de texto perteneciente a un formulario se puede hacer de la siguiente manera con javascript. Código < script type = "text/javascript" > function validar () { //obteniendo el valor que se puso en campo text del formulario miCampoTexto = document . getElementById ( "miCampo" ) . value ; //la condición if ( miCampoTexto . length == 0 ) { return false ; } return true ; } </ script > < form action = "mipagina.php" onsubmit = "return validar()" > < input type = "text" id = " miCampo " name = "miCampo" > < br > < input type = "submit" value = "Enviar" > </ form > miCampoTexto.length -> indica el número de caracteres del texto introducido En esta validación los usuarios deben llenar los campos
8 comentarios
Read more »