jQuery Popup Burbuja/Descripción

Estoy tratando de hacer una «burbuja» que puede emergente cuando el onmouseover evento es disparado y permanecerá abierta mientras el ratón está sobre el elemento que produjo la onmouseover evento O si el ratón se mueve dentro de la burbuja. Mi burbuja se necesita tener todas las formas de HTML y estilo, incluyendo hipervínculos, imágenes, etc.

Yo, básicamente, ha logrado esto por escrito acerca de 200 líneas de feo JavaScript, pero realmente me gustaría encontrar un plugin de jQuery o alguna otra manera de limpiar esto un poco.

  • Fuera de tema? En serio? El chico le hace una pregunta acerca de cómo reducir sus 200 líneas de código mediante el uso de JQuery, y se usa en casi un cuarto de millón de veces (acaba de resolver mi problema) y lo marca fuera de tema? Lo que acerca de esto invita a más obstinado de respuestas que cualquier otra pregunta?
  • ¿Leyó la razón por la que fue cerrado? Se pide específicamente «un buen plugin de jQuery para hacer burbujas de fantasía». Preguntas pidiendo recomendaciones son off-topic, pero si usted piensa que esto podría ser reescrito para hacer esto en el tema, a continuación, siéntase libre de sugerir una edición de ponerlo en forma.
InformationsquelleAutor jakejgordon | 2009-03-09

13 Kommentare

  1. 158

    Qtip es la mejor que he visto. Es con licencia MIT, hermoso, tiene toda la configuración que usted necesita.

    Mi favorito ligero opción es achispado. También con licencia MIT. Inspiró Bootstrap de la descripción de plugin.

    • Por lejos el mejor. Una línea de código vs todas las otras grandes soluciones que otros nos han ofrecido. Espero que esta respuesta se votó arriba.
    • Qtip tiene problemas de compatibilidad con jQuery 1.4+. Simple una línea de revisión para qTip enchufe en lo arregla, aunque. Ver aquí: craigsworks.com/projects/forums/…
    • Miré a Qtip el día de hoy y mientras se hace el trabajo, hay algunos lados hacia abajo: no ha sido actualizado en mucho tiempo, es falta o no se ha documentado algunas cosas obvias (quiere construir la punta de la herramienta de texto con una función que se llama cuando la punta se muestra) y es un fuerte descarga (en parte porque parece incluir un montón de cosas como las esquinas redondeadas estilo). Esperemos que no sea visto como negativo-tratando de salvar a alguien de algún tiempo. Definitivamente vale la pena considerar, pero hay algunos aspectos negativos.
    • No puedo hablar de cómo eran las cosas alrededor de Sept. de ’10, pero nada de lo que dices es cierto por más tiempo. Es: activo, bien documentado, y permite muy personalizable tamaño de la descarga a la interfaz de usuario jQuery.
  2. 51

    Esto se puede hacer fácilmente con el evento mouseover así. Yo lo he hecho y no pasa de 200 líneas. Empezar con disparo en el evento, a continuación, utilizar una función que va a crear la descripción.

    $('span.clickme').mouseover(function(event) {
        createTooltip(event);               
    }).mouseout(function(){
        //create a hidefunction on the callback if you want
        //hideTooltip(); 
    });
    
    function createTooltip(event){          
        $('<div class="tooltip">test</div>').appendTo('body');
        positionTooltip(event);        
    };

    A continuación, crear una función que la posición de la descripción con la posición de desplazamiento de los DOM-elemento que desencadena el evento mouseover, esto es posible con css.

    function positionTooltip(event){
        var tPosX = event.pageX - 10;
        var tPosY = event.pageY - 100;
        $('div.tooltip').css({'position': 'absolute', 'top': tPosY, 'left': tPosX});
    };
    • Simple y útil, sin necesidad de XX ko plugin cuando se puede escribir fácilmente. PS : posición:absoluta falta 🙂
    • Usted probablemente desea agregar «px» las unidades a su enteros. 'top': tPosY + 'px' y así sucesivamente.
    • $(‘span.klickme’) – esto es malo 🙂
    • Me gusta tu enfoque. Manera muy fácil de hacer sin el uso de ninguna librería externa
  3. 12

    Aunque qTip (el aceptado respuesta) es bueno, he empezado a utilizar, y que carecía de algunas de las características que yo necesitaba.

    Entonces me topé con PoshyTip – es muy flexible y muy fácil de usar. (Y que yo podía hacer lo que yo necesitaba)

  4. 4

    Aceptar, después de algún trabajo que yo soy capaz de conseguir una «burbuja» para que aparezca y desaparezca en todos los momentos. Hay un MONTÓN de estilo que debe suceder todavía, pero esta es, básicamente, el código que he usado.

    <script type="text/javascript">
        //--indicates the mouse is currently over a div
        var onDiv = false;
        //--indicates the mouse is currently over a link
        var onLink = false;
        //--indicates that the bubble currently exists
        var bubbleExists = false;
        //--this is the ID of the timeout that will close the window if the user mouseouts the link
        var timeoutID;
    
        function addBubbleMouseovers(mouseoverClass) {
            $("."+mouseoverClass).mouseover(function(event) {
                if (onDiv || onLink) {
                    return false;
                }
    
                onLink = true;
    
                showBubble.call(this, event);
            });
    
            $("." + mouseoverClass).mouseout(function() {
                onLink = false;
                timeoutID = setTimeout(hideBubble, 150);
            });
        }
    
        function hideBubble() {
            clearTimeout(timeoutID);
            //--if the mouse isn't on the div then hide the bubble
            if (bubbleExists && !onDiv) {
                 $("#bubbleID").remove();
    
                 bubbleExists = false;
            }
        }
    
        function showBubble(event) {
            if (bubbleExists) {
                hideBubble();
            }
    
            var tPosX = event.pageX + 15;
            var tPosY = event.pageY - 60;
            $('<div ID="bubbleID" style="top:' + tPosY + '; left:' + tPosX + '; position: absolute; display: inline; border: 2px; width: 200px; height: 150px; background-color: Red;">TESTING!!!!!!!!!!!!</div>').mouseover(keepBubbleOpen).mouseout(letBubbleClose).appendTo('body');
    
            bubbleExists = true;
        }
    
        function keepBubbleOpen() {
            onDiv = true;
        }
    
        function letBubbleClose() {
            onDiv = false;
    
            hideBubble();
        }
    
    
        //--TESTING!!!!!
        $("document").ready(function() {
            addBubbleMouseovers("temp1");
        });
    </script>

    Aquí es un fragmento de código html que se va con ella:

    <a href="" class="temp1">Mouseover this for a terribly ugly red bubble!</a>
  5. 4

    He programado un útil Plugin de jQuery para crear fácilmente inteligente de burbujas emergentes con sólo una línea de código en jQuery!

    Lo que Usted puede hacer:
    – adjuntar las ventanas emergentes a cualquier elemento de DOM!
    – mouseover/mouseout eventos gestionadas automáticamente!
    – configurar de forma personalizada las ventanas emergentes de eventos!
    – crear inteligente sombra de pop-ups! (en IE también!)
    – elija emergente del estilo de las plantillas en tiempo de ejecución!
    – insertar los mensajes HTML en el interior de pop-ups!
    – establecer muchas opciones como: distancias, la velocidad, los retrasos, los colores…

    Emergente de las sombras y coloreada plantillas son totalmente compatibles con
    Internet Explorer 6+, Firefox, Opera 9+, Safari

    Puede descargar fuentes de
    http://plugins.jquery.com/project/jqBubblePopup

  6. 3

    Suena a mí que dn no quiero el ratón sobre los eventos: desea que el jQuery hover() del evento.

    Y lo que parece que quieren es un «rico» de la descripción, en cuyo caso le sugiero jQuery tooltip. Con el bodyHandler opción usted puede poner HTML arbitrario en.

    • Hola, gracias por la super-rápida respuesta! Acabo de desnatada a través de la documentación y no estoy seguro de que hay una opción para la «descripción» para permanecer en una posición fija de manera que pueda mover su ratón sobre él y haga clic en un enlace. Han utilizado esto antes? En el mientras tanto, voy a descargarlo y empezar a jugar
  7. 2

    Estoy tratando de hacer una «burbuja» que puede
    emergente cuando el evento onmouseover es
    despedido y se mantendrá abierta mientras
    el ratón está sobre el elemento del que tiró
    el evento onmouseover O si el ratón
    se mueve en la burbuja. Mi burbuja
    se necesita tener todas las formas de html
    y estilo, incluyendo hipervínculos,
    imágenes, etc.

    Todos aquellos eventos totalmente gestionado por este plugin…

    http://plugins.jquery.com/project/jqBubblePopup

    • Este link no sirve …
  8. 2

    La nueva versión 3.0 de jQuery Burbuja Emergente plugin de jQuery soporta v. 1.7.2, actualmente la última y la versión estable de la más famosa biblioteca de javascript.

    La característica más interesante de la versión 3.0 es que Usted puede utilizar jQuery & Burbuja Emergente plugin con cualquier otro bibliotecas y frameworks de javascript como el Guión.aculo.nosotros, Mootols o Prototipo debido a que el plugin es totalmente encapsulado para evitar problemas de incompatibilidad;

    jQuery Burbuja Emergente fue probado y es compatible con una gran cantidad de conocidos y de «desconocido» de los navegadores; consulte la documentación para obtener la lista completa.

    Igual que las versiones anteriores, jQuery Burbuja Emergente plugin sigue siendo liberado bajo la licencia MIT; Usted es libre de usar jQuery Burbuja Emergente en comerciales o proyectos personales siempre como el autor de cabecera de la izquierda está intacto.

    descargar la última versión o visitar en directo a demostraciones y tutoriales
    http://www.maxvergelli.com/jquery-bubble-popup/

  9. 1

    Autoresize simple Burbuja Emergente

    index.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <link href="bubble.css" type="text/css" rel="stylesheet" />
      <script language="javascript" type="text/javascript" src="jquery.js"></script>
      <script language="javascript" type="text/javascript" src="bubble.js"></script>
    </head>
    <body>
      <br/><br/>
      <div class="bubbleInfo">
          <div class="bubble" title="Text 1">Set cursor</div>
      </div>
      <br/><br/><br/><br/>
      <div class="bubbleInfo">
          <div class="bubble" title="Text 2">Set cursor</div>
      </div>
    </body>
    </html>

    bubble.js

    $(function () {     
      var i = 0;
      var z=1;
      do{
        title = $('.bubble:eq('+i+')').attr('title');
        if(!title){
          z=0;
        } else {
           $('.bubble:eq('+i+')').after('<table style="opacity: 0; top: -50px; left: -33px; display: none;" id="dpop" class="popup"><tbody><tr><td id="topleft" class="corner"></td><td class="top"></td><td id="topright" class="corner"></td></tr><tr><td class="left"></td><td>'+title+'</td><td class="right"></td></tr><tr><td class="corner" id="bottomleft"></td><td class="bottom"><img src="bubble/bubble-tail.png" height="25px" width="30px" /></td><td id="bottomright" class="corner"></td></tr></tbody></table>');
           $('.bubble:eq('+i+')').removeAttr('title');
        }
        i++;
      }while(z>0)
    
      $('.bubbleInfo').each(function () {
        var distance = 10;
        var time = 250;
        var hideDelay = 500;        
        var hideDelayTimer = null;       
        var beingShown = false;
        var shown = false;
        var trigger = $('.bubble', this);
        var info = $('.popup', this).css('opacity', 0);        
    
        $([trigger.get(0), info.get(0)]).mouseover(function () {
          if (hideDelayTimer) clearTimeout(hideDelayTimer);
          if (beingShown || shown) {
            //don't trigger the animation again
            return;
          } else {
            //reset position of info box
            beingShown = true;
    
            info.css({
            top: -40,
            left: 10,
            display: 'block'
            }).animate({
            top: '-=' + distance + 'px',
            opacity: 1
            }, time, 'swing', function() {
              beingShown = false;
              shown = true;
            });
          }          
          return false;
        }).mouseout(function () {
          if (hideDelayTimer) clearTimeout(hideDelayTimer);
          hideDelayTimer = setTimeout(function () {
            hideDelayTimer = null;
            info.animate({
              top: '-=' + distance + 'px',
              opacity: 0
            }, time, 'swing', function () {
              shown = false;
              info.css('display', 'none');
            });
          }, hideDelay);
          return false;
        });
      }); 
    });

    de la burbuja.css

    /* Booble */
    .bubbleInfo {
        position: relative;
        width: 500px;
    }
    .bubble {       
    }
    .popup {
        position: absolute;
        display: none;
        z-index: 50;
        border-collapse: collapse;
        font-size: .8em;
    }
    .popup td.corner {
        height: 13px;
        width: 15px;
    }
    .popup td#topleft { 
        background-image: url(bubble/bubble-1.png); 
    } 
    .popup td.top { 
        background-image: url(bubble/bubble-2.png); 
    }
    .popup td#topright { 
        background-image: url(bubble/bubble-3.png); 
    }
    .popup td.left { 
        background-image: url(bubble/bubble-4.png); 
    }
    .popup td.right { 
        background-image: url(bubble/bubble-5.png); 
    }
    .popup td#bottomleft { 
        background-image: url(bubble/bubble-6.png); 
    }
    .popup td.bottom { 
        background-image: url(bubble/bubble-7.png); 
        text-align: center;
    }
    .popup td.bottom img { 
        display: block; 
        margin: 0 auto; 
    }
    .popup td#bottomright { 
        background-image: url(bubble/bubble-8.png); 
    }
  10. 1

    Puede utilizar qTip para esto; sin Embargo, tendría un código un poco para su lanzamiento en el evento mouseover; Y en caso de que desee un defecto marca de agua en tus campos de texto, usted tendría que usar la marca de agua plugin…

    Me di cuenta de que esto lleva a un montón de código repetitivo; Así que escribí un plugin en la parte superior de qTip que hace que sea muy fácil de colocar informativo emergente para los campos de formulario. Usted puede ver aquí: https://bitbucket.org/gautamtandon/jquery.attachinfo

    Espero que esto ayude.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea