JQuery Popup Bubble / Tooltip [fechado]

Estou tentando fazer uma "bolha" que pode onmouseoveraparecer quando o evento é disparado e permanecer aberta enquanto o mouse estiver sobre o item que lançou o onmouseoverevento OU se o mouse for movido para dentro da bolha. Minha bolha precisará ter todos os tipos de HTML e estilo, incluindo hiperlinks, imagens etc.

Eu basicamente fiz isso escrevendo cerca de 200 linhas de JavaScript feio, mas eu realmente gostaria de encontrar um plugin jQuery ou alguma outra maneira de limpar isso um pouco.

Qtip é o melhor que já vi. É licenciado pelo MIT, lindo, tem toda a configuração que você precisa.

Minha opção leve favorita é embriagada . Também licenciado pelo MIT. Ele inspirou o plugin de dicas do Bootstrap .

Isso também pode ser feito facilmente com o evento mouseover. Já fiz isso e não são necessárias 200 linhas. Comece acionando o evento e, em seguida, use uma função que criará a dica de ferramenta.

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

Em seguida, você cria uma função que posiciona a dica de ferramenta com a posição de deslocamento do elemento DOM que acionou o evento mouseover, isso pode ser feito com css.

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

Embora qTip (a resposta aceita) seja bom, comecei a usá-lo e faltavam alguns recursos de que precisava.

Então me deparei com o PoshyTip - é muito flexível e muito fácil de usar. (E eu poderia fazer o que fosse necessário)

Ok, depois de algum trabalho eu consigo fazer uma "bolha" aparecer e ir embora na hora certa. Ainda há muito estilo que precisa acontecer, mas esse é basicamente o código que usei.

<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>

Aqui está um snippet do html que o acompanha:

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

Eu programei um plugin jQuery útil para criar pop-ups de bolhas facilmente inteligentes com apenas uma linha de código em jQuery!

O que você pode fazer: - anexar pop-ups a qualquer elemento DOM! - eventos de mouseover / mouseout gerenciados automaticamente! - definir eventos de popups personalizados! - crie popups sombreados inteligentes! (no IE também!) - escolha os modelos de estilo do popup em tempo de execução! - insira mensagens HTML dentro de pop-ups! - defina várias opções como: distâncias, velocidade, atrasos, cores ...

As sombras e os modelos coloridos do Popup são totalmente suportados pelo Internet Explorer 6+, Firefox, Opera 9+, Safari

Você pode baixar fontes em http://plugins.jquery.com/project/jqBubblePopup

QTip tem bug com jQuery 1.4.2. Tive que mudar para jQuery Bubble Pop up http://www.vegabit.com/jquery_bubble_popup_v2/#examples e funcionou muito bem!

Parece-me que você não quer os eventos do mouse sobre os eventos: você quer o evento hover () do jQuery.

E o que você parece querer é uma dica de ferramenta "rica", caso em que sugiro uma dica de ferramenta jQuery . Com a opção bodyHandler, você pode inserir HTML arbitrário.

Estou tentando fazer uma "bolha" que pode aparecer quando o evento onmouseover é disparado e permanecerá aberta enquanto o mouse estiver sobre o item que lançou o evento onmouseover OU se o mouse for movido para dentro da bolha. Minha bolha precisará ter todos os tipos de html e estilo, incluindo hiperlinks, imagens, etc.

Todos esses eventos totalmente gerenciados por este plugin ...

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

ColorTip é o mais lindo que já vi

A nova versão 3.0 do plugin jQuery Bubble Popup suporta jQuery v.1.7.2, atualmente a versão mais recente e estável da mais famosa biblioteca javascript.

O recurso mais interessante da versão 3.0 é que você pode usar o plugin jQuery & Bubble Popup junto com qualquer outra biblioteca e frameworks javascript como Script.aculo.us, Mootols ou Prototype porque o plugin é completamente encapsulado para evitar problemas de incompatibilidade;

jQuery Bubble Popup foi testado e suporta muitos navegadores conhecidos e “desconhecidos”; veja a documentação para a lista completa.

Como nas versões anteriores, o plugin jQuery Bubble Popup continua a ser lançado sob a licença MIT; Você é livre para usar o jQuery Bubble Popup em projetos comerciais ou pessoais, desde que o cabeçalho de copyright seja deixado intacto.

baixe a versão mais recente ou visite as demonstrações e tutoriais ao vivo em http://www.maxvergelli.com/jquery-bubble-popup/

Balão pop-up simples de tamanho automático

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 também é uma boa biblioteca.

Você pode usar qTip para isso; No entanto, você teria que codificar um pouco para iniciá-lo no evento mouseover; E caso você queira uma marca d'água padrão em seus campos de texto, você terá que usar o plugin de marca d'água ...

Percebi que isso leva a muitos códigos repetitivos; Então, escrevi um plugin no topo do qTip que torna realmente fácil anexar pop-up informativo aos campos do formulário. Você pode conferir aqui: https://bitbucket.org/gautamtandon/jquery.attachinfo

Espero que isto ajude.