jQuery Popup Bubble / Tooltip [chiuso]

Sto cercando di creare una "bolla" che possa apparire quando l' onmouseoverevento viene attivato e rimarrà aperta finché il mouse si trova sull'elemento che ha generato l' onmouseoverevento OPPURE se il mouse viene spostato nella bolla. La mia bolla dovrà avere tutte le modalità di HTML e stile, inclusi collegamenti ipertestuali, immagini, ecc.

Fondamentalmente ho ottenuto questo risultato scrivendo circa 200 righe di brutto JavaScript, ma mi piacerebbe davvero trovare un plugin jQuery o qualche altro modo per ripulirlo un po '.

Qtip è il migliore che abbia mai visto. È dotato di licenza MIT, bellissimo, ha tutta la configurazione di cui hai bisogno.

La mia opzione leggera preferita è brilla . Anche con licenza MIT. Ha ispirato il plugin tooltip di Bootstrap .

Questo può essere fatto facilmente anche con l'evento mouseover. L'ho fatto e non ci vogliono affatto 200 righe. Inizia con l'attivazione dell'evento, quindi utilizza una funzione che creerà il suggerimento.

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

Quindi crei una funzione che posiziona il tooltip con la posizione di offset dell'elemento DOM che ha attivato l'evento mouseover, questo è fattibile con css.

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

Sebbene qTip (la risposta accettata) sia buono, ho iniziato a usarlo e mancava di alcune funzionalità di cui avevo bisogno.

Poi mi sono imbattuto in PoshyTip : è molto flessibile e davvero facile da usare. (E potrei fare quello di cui avevo bisogno)

Ok, dopo un po 'di lavoro riesco a far apparire una "bolla" e andarsene al momento giusto. C'è ancora MOLTO stile che deve essere realizzato, ma questo è fondamentalmente il codice che ho usato.

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

Ecco uno snippet dell'html che lo accompagna:

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

Ho programmato un utile plugin jQuery per creare pop-up a bolle facilmente intelligenti con solo una riga di codice in jQuery!

Cosa puoi fare: - allegare popup a qualsiasi elemento DOM! - eventi mouseover / mouseout gestiti automaticamente! - imposta eventi popup personalizzati! - crea popup intelligenti nascosti! (anche in IE!) - scegli i modelli di stile di popup in fase di esecuzione! - inserisci messaggi HTML nei popup! - imposta molte opzioni come: distanze, velocità, ritardi, colori ...

Le ombre ei modelli colorati di Popup sono completamente supportati da Internet Explorer 6+, Firefox, Opera 9+, Safari

Puoi scaricare sorgenti da http://plugins.jquery.com/project/jqBubblePopup

QTip ha un bug con jQuery 1.4.2. Ho dovuto passare a jQuery Bubble Pop up http://www.vegabit.com/jquery_bubble_popup_v2/#examples e funziona benissimo!

Mi sembra che tu non voglia il mouse sugli eventi: vuoi l'evento jQuery hover ().

E quello che sembri desiderare è un tooltip "ricco", nel qual caso suggerisco jQuery tooltip . Con l'opzione bodyHandler puoi inserire HTML arbitrario in.

Sto cercando di creare una "bolla" che può apparire quando viene attivato l'evento onmouseover e rimarrà aperta fintanto che il mouse si trova sull'elemento che ha generato l'evento onmouseover OPPURE se il mouse viene spostato nella bolla. La mia bolla dovrà avere tutti i modi di HTML e stile, inclusi collegamenti ipertestuali, immagini, ecc.

Tutti quegli eventi completamente gestiti da questo plugin ...

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

ColorTip è il più bello che abbia mai visto

La nuova versione 3.0 del plugin jQuery Bubble Popup supporta jQuery v.1.7.2, attualmente l'ultima e stabile versione della più famosa libreria javascript.

La caratteristica più interessante della versione 3.0 è che puoi usare insieme il plugin jQuery & Bubble Popup con qualsiasi altra libreria e framework javascript come Script.aculo.us, Mootols o Prototype perché il plugin è completamente incapsulato per evitare problemi di incompatibilità;

jQuery Bubble Popup è stato testato e supporta molti browser noti e "sconosciuti"; vedere la documentazione per l'elenco completo.

Come le versioni precedenti, il plugin jQuery Bubble Popup continua a essere rilasciato sotto la licenza MIT; Sei libero di usare jQuery Bubble Popup in progetti commerciali o personali a condizione che l'intestazione del copyright sia lasciata intatta.

scarica l'ultima versione o visita demo live e tutorial su http://www.maxvergelli.com/jquery-bubble-popup/

Autoresize semplice 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 è anche una bella libreria.

Puoi usare qTip per questo; Tuttavia dovresti programmare un po 'per avviarlo all'evento mouseover; E nel caso in cui desideri una filigrana predefinita nei tuoi campi di testo, dovresti utilizzare il plug-in della filigrana ...

Mi sono reso conto che questo porta a un sacco di codice ripetitivo; Quindi ho scritto un plugin sopra qTip che rende davvero facile allegare popup informativi ai campi del modulo. Puoi verificarlo qui: https://bitbucket.org/gautamtandon/jquery.attachinfo

Spero che questo ti aiuti.