Ventana emergente de jQuery / descripción emergente [cerrada]

Estoy tratando de hacer una "burbuja" que pueda aparecer cuando onmouseoverse dispara el evento y permanecerá abierta mientras el mouse esté sobre el elemento que lanzó el onmouseoverevento O si el mouse se mueve dentro de la burbuja. Mi burbuja deberá tener todas las formas de HTML y estilo, incluidos hipervínculos, imágenes, etc.

Básicamente, lo logré escribiendo unas 200 líneas de JavaScript feo, pero realmente me gustaría encontrar un complemento de jQuery o alguna otra forma de limpiar esto un poco.

Qtip es el mejor que he visto. Tiene licencia del MIT, es hermoso, tiene toda la configuración que necesita.

Mi opción favorita de peso ligero es borracho . También con licencia del MIT. Inspiró el complemento de información sobre herramientas de Bootstrap .

Esto también se puede hacer fácilmente con el evento mouseover. Lo he hecho y no se necesitan 200 líneas en absoluto. Empiece por activar el evento, luego utilice una función que creará la información sobre herramientas.

$('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);        
};

Luego, crea una función que coloca la información sobre herramientas con la posición de desplazamiento del elemento DOM que desencadenó el evento de mouseover, esto es factible con css.

function positionTooltip(event){
    var tPosX = event.pageX - 10;
    var tPosY = event.pageY - 100;
    $('div.tooltip').css({'position': 'absolute', 'top': tPosY, 'left': tPosX});
};

Aunque qTip (la respuesta aceptada) es buena, comencé a usarlo y carecía de algunas funciones que necesitaba.

Luego me topé con PoshyTip : es muy flexible y muy fácil de usar. (Y podría hacer lo que necesitaba)

Bien, después de un poco de trabajo puedo hacer que aparezca una "burbuja" y desaparezca en los momentos adecuados. Todavía hay MUCHOS estilos que deben suceder, pero este es básicamente el código que utilicé.

<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í hay un fragmento del html que lo acompaña:

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

¡He programado un complemento jQuery útil para crear ventanas emergentes de burbujas inteligentes fácilmente con solo una línea de código en jQuery!

Lo que puede hacer: - ¡adjuntar ventanas emergentes a cualquier elemento DOM! - ¡Eventos de mouseover / mouseout gestionados automáticamente! - ¡Configura eventos emergentes personalizados! - ¡Crea ventanas emergentes sombreadas inteligentes! (¡en IE también!) - ¡Elija las plantillas de estilo de las ventanas emergentes en tiempo de ejecución! - ¡Inserta mensajes HTML dentro de ventanas emergentes! - establecer muchas opciones como: distancias, velocidad, retrasos, colores ...

Las sombras emergentes y las plantillas coloreadas son totalmente compatibles con Internet Explorer 6+, Firefox, Opera 9+, Safari

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

QTip tiene un error con jQuery 1.4.2. Tuve que cambiar a jQuery Bubble Pop up http://www.vegabit.com/jquery_bubble_popup_v2/#examples ¡ y funciona muy bien!

A mí me suena que no querrías el mouse sobre los eventos: quieres el evento jQuery hover ().

Y lo que parece querer es una información sobre herramientas "rica", en cuyo caso sugiero información sobre herramientas de jQuery . Con la opción bodyHandler puede colocar HTML arbitrario.

Estoy tratando de hacer una "burbuja" que pueda aparecer cuando se active el evento onmouseover y permanecerá abierta mientras el mouse esté sobre el elemento que lanzó el evento onmouseover O si el mouse se mueve dentro de la burbuja. Mi burbuja deberá tener todas las formas de html y estilo, incluidos hipervínculos, imágenes, etc.

Todos esos eventos totalmente gestionados por este plugin ...

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

ColorTip es el más hermoso que he visto

La nueva versión 3.0 del complemento jQuery Bubble Popup es compatible con jQuery v.1.7.2, actualmente la versión más reciente y estable de la biblioteca de JavaScript más famosa.

La característica más interesante de la versión 3.0 es que puede usar el plugin jQuery & Bubble Popup junto con cualquier otra biblioteca y framework javascript como Script.aculo.us, Mootols o Prototype porque el plugin está completamente encapsulado para evitar problemas de incompatibilidad;

jQuery Bubble Popup fue probado y es compatible con una gran cantidad de navegadores conocidos y "desconocidos"; consulte la documentación para obtener la lista completa.

Al igual que las versiones anteriores, el complemento jQuery Bubble Popup continúa lanzándose bajo la licencia MIT; Puede usar jQuery Bubble Popup en proyectos comerciales o personales siempre que el encabezado de derechos de autor se deje intacto.

descargue la última versión o visite demostraciones y tutoriales en vivo en http://www.maxvergelli.com/jquery-bubble-popup/

Autoresize simple Popup Bubble

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;
    });
  }); 
});

bubble.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); 
}

Tiptip también es una buena biblioteca.

Puede usar qTip para esto; Sin embargo, tendría que codificar un poco para ejecutarlo en el evento de mouseover; Y en caso de que desee una marca de agua predeterminada en sus campos de texto, tendrá que usar el complemento de marca de agua ...

Me di cuenta de que esto genera mucho código repetitivo; Así que escribí un complemento sobre qTip que hace que sea realmente fácil adjuntar ventanas emergentes informativas a los campos de formulario. Puede consultarlo aquí: https://bitbucket.org/gautamtandon/jquery.attachinfo

Espero que esto ayude.