2011-12-22 17 views
12

He estado buscando una forma de implementar una ventana emergente con el mouse sobre el aire sin suerte. Debido a que se usa en muchos sitios, pensé que sería fácil encontrar instrucciones, pero me pregunto si me falta algo básico. He visto qTips2 y algunos otros, pero estos parecen mucho más de lo que necesito.Cómo crear ventanas emergentes en Rails 3.1

Tengo una aplicación Rails 3.1 y quiero mostrar más detalles cuando un usuario pasa el mouse sobre una línea en una tabla. ¿Esto está integrado en Rails que me falta, o necesito un add-on?

Estoy seguro de que apreciaría que alguien me señale en la dirección correcta.

Gracias!

+0

Eso sería un simple div flotando. –

+0

Esta no es una pregunta de Rails, sino más bien una pregunta de CSS o JavaScript. –

+0

¡Ja! Las etiquetas javascript y css se agregaron antes de poder acceder. –

Respuesta

11

uso un poco de CSS y Javascript!

He aquí un ejemplo se puede jugar con: http://jsfiddle.net/cdpZg/

Copiar aquí, por si acaso.

HTML:

<div id='user'>I am a user. Move your mouse over me</div> 
<div id='popup'>Extended info about a user</div> 
<div>I a piece of useless information. No use hovering over me.</div> 

CSS:

#popup { 
    height: 50px; 
    width: 200px; 
    text-align: center; 
    vertical-align:middle; 
    background-color: cornflowerblue; 
    color: white; 
    display: none; 
    padding-top: 8px; 
    position: absolute; 
} 

Javascript:

$(document).ready(function() { 
    $('#user').hover(function() { 
     $('#popup').show(); 
    }, function() { 
     $('#popup').hide(); 
    }); 
}); 
+0

Gracias Sergi, Para la beneficio de alguien más ... Para que esto funcione en mi aplicación Rails 3.1, tuve que buscar el Javascript con '$ (documento) .ready (función() { " javascript goes here " });' – SteveO7

+0

@ SteveO7 Sí, eso es un poco básico. Actualizaré mi respuesta, por si acaso :-) –

+2

¡A veces esas cosas básicas te pueden costar mucho tiempo! Gracias de nuevo – SteveO7

6

acaba de establecer el título en su enlace como este

<a title="Some text that will show up when I hover over this link">My link</a> 
+1

No tenía idea de que fuera así de simple ... He llevado una vida de escritorio resguardada y me estoy metiendo en el desarrollo de Rails. ¡Gracias! – SteveO7

+0

@ SteveO7 no hay problema, si funcionó para usted, por favor marque su pregunta como respuesta para futura referencia, me alegro de poder ayudar –

+0

Bassam, ¿hay alguna manera de hacer esto en un enlace no? Lo que quiero usar es un "" en una tabla. – SteveO7

Cuestiones relacionadas