jQuery Popup Bubble / Tooltip [geschlossen]

Ich versuche, eine "Blase" zu erstellen, die beim Auslösen des onmouseoverEreignisses angezeigt wird und geöffnet bleibt, solange sich die Maus über dem Element befindet, das das Ereignis ausgelöst hat, onmouseoverODER wenn die Maus in die Blase bewegt wird. Meine Blase muss alle Arten von HTML und Styling enthalten, einschließlich Hyperlinks, Bilder usw.

Ich habe dies im Grunde erreicht, indem ich ungefähr 200 Zeilen hässliches JavaScript geschrieben habe, aber ich würde wirklich gerne ein jQuery-Plugin oder eine andere Möglichkeit finden, dies ein wenig zu bereinigen.

Qtip ist das beste, das ich je gesehen habe. Es ist MIT lizenziert, schön, hat alle Konfiguration, die Sie brauchen.

Meine bevorzugte leichte Option ist beschwipst . Auch MIT lizenziert. Es inspirierte das Tooltip-Plugin von Bootstrap .

Dies kann auch mit dem Mouseover-Ereignis problemlos durchgeführt werden. Ich habe es geschafft und es dauert überhaupt nicht 200 Zeilen. Beginnen Sie mit dem Auslösen des Ereignisses und verwenden Sie dann eine Funktion, mit der der Tooltip erstellt wird.

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

Anschließend erstellen Sie eine Funktion, die den Tooltip mit der Versatzposition des DOM-Elements positioniert, das das Mouseover-Ereignis ausgelöst hat. Dies ist mit CSS möglich.

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

Obwohl qTip (die akzeptierte Antwort) gut ist, habe ich damit begonnen und es fehlten einige Funktionen, die ich brauchte.

Ich bin dann auf PoshyTip gestoßen - es ist sehr flexibel und sehr einfach zu bedienen. (Und ich konnte tun, was ich brauchte)

Ok, nach einiger Arbeit kann ich eine "Blase" bekommen, die zum richtigen Zeitpunkt auftaucht und verschwindet. Es gibt eine Menge Styling, das noch passieren muss, aber dies ist im Grunde der Code, den ich verwendet habe.

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

Hier ist ein Ausschnitt aus dem dazugehörigen HTML:

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

Ich habe ein nützliches jQuery-Plugin programmiert, um einfach intelligente Bubble-Popups mit nur einer Codezeile in jQuery zu erstellen!

Was Sie tun können: - Popups an jedes DOM-Element anhängen! - Mouseover / Mouseout-Ereignisse werden automatisch verwaltet! - Setze benutzerdefinierte Popup-Events! - Erstelle intelligente Popups mit Schatten! (auch im IE!) - Wählen Sie zur Laufzeit die Popup-Stilvorlagen aus! - HTML-Nachrichten in Popups einfügen! - Stellen Sie viele Optionen ein: Entfernungen, Geschwindigkeit, Verzögerungen, Farben…

Popups Schatten und kolorierte Vorlagen werden von Internet Explorer 6+, Firefox, Opera 9+ und Safari vollständig unterstützt

Sie können Quellen von http://plugins.jquery.com/project/jqBubblePopup herunterladen

QTip hat einen Fehler mit jQuery 1.4.2. Ich musste zu jQuery Bubble Pop up wechseln http://www.vegabit.com/jquery_bubble_popup_v2/#examples und es funktioniert großartig!

Klingt für mich so, als ob Sie nicht mit der Maus über Ereignisse fahren möchten: Sie möchten das Ereignis jQuery hover ().

Und was Sie zu wollen scheinen, ist ein "reichhaltiger" Tooltip. In diesem Fall schlage ich einen jQuery-Tooltip vor . Mit der Option bodyHandler können Sie beliebigen HTML-Code einfügen.

Ich versuche, eine "Blase" zu erstellen, die beim Auslösen des Onmouseover-Ereignisses angezeigt wird und geöffnet bleibt, solange sich die Maus über dem Element befindet, das das Onmouseover-Ereignis ausgelöst hat, ODER wenn die Maus in die Blase bewegt wird. Meine Blase muss alle Arten von HTML und Styling haben, einschließlich Hyperlinks, Bilder usw.

Alle diese Ereignisse werden vollständig von diesem Plugin verwaltet ...

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

ColorTip ist das schönste, das ich je gesehen habe

Die neue Version 3.0 des jQuery Bubble Popup-Plugins unterstützt jQuery v.1.7.2, derzeit die neueste und stabile Version der bekanntesten Javascript-Bibliothek.

Das interessanteste Merkmal der Version 3.0 ist, dass Sie das jQuery & Bubble Popup-Plugin zusammen mit anderen Bibliotheken und Javascript-Frameworks wie Script.aculo.us, Mootols oder Prototype verwenden können, da das Plugin vollständig gekapselt ist, um Inkompatibilitätsprobleme zu vermeiden.

jQuery Bubble Popup wurde getestet und unterstützt viele bekannte und „unbekannte“ Browser. Die vollständige Liste finden Sie in der Dokumentation.

Wie in früheren Versionen wird das jQuery Bubble Popup-Plugin weiterhin unter der MIT-Lizenz veröffentlicht. Es steht Ihnen frei, jQuery Bubble Popup in kommerziellen oder persönlichen Projekten zu verwenden, solange der Copyright-Header intakt bleibt.

Laden Sie die neueste Version herunter oder besuchen Sie Live-Demos und -Tutorials unter http://www.maxvergelli.com/jquery-bubble-popup/

Autoresize einfache Popup-Blase

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>

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

buble.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 ist auch eine schöne Bibliothek.

Sie können dafür qTip verwenden. Sie müssten jedoch ein wenig codieren, um es beim Mouseover-Ereignis zu starten. Und falls Sie ein Standardwasserzeichen in Ihren Textfeldern haben möchten, müssen Sie das Wasserzeichen-Plugin verwenden ...

Mir wurde klar, dass dies zu viel sich wiederholendem Code führt. Deshalb habe ich über qTip ein Plugin geschrieben, mit dem es sehr einfach ist, Informations-Popups an Formularfelder anzuhängen. Sie können es hier überprüfen: https://bitbucket.org/gautamtandon/jquery.attachinfo

Hoffe das hilft.