jQuery Popup Bubble / Tooltip [zamknięte]

Próbuję utworzyć „bąbelek”, który wyskakuje po uruchomieniu onmouseoverzdarzenia i pozostanie otwarty tak długo, jak długo kursor myszy znajdzie się nad elementem, który wywołał onmouseoverzdarzenie LUB zostanie przeniesiony do bańki. Moja bańka musi mieć wszystkie sposoby HTML i style, w tym hiperłącza, obrazy itp.

Zasadniczo osiągnąłem to, pisząc około 200 linii brzydkiego JavaScript, ale naprawdę chciałbym znaleźć wtyczkę jQuery lub inny sposób, aby trochę to uporządkować.

Qtip jest najlepszym, jakie widziałem. Jest na licencji MIT, piękny, ma całą potrzebną konfigurację.

Moja ulubiona lekka opcja jest podpita . Posiada również licencję MIT. Zainspirowało to wtyczkę podpowiedzi Bootstrap .

Można to również łatwo zrobić za pomocą zdarzenia mouseover. Zrobiłem to i nie zajmuje to wcale 200 linii. Zacznij od wyzwolenia zdarzenia, a następnie użyj funkcji, która utworzy podpowiedź.

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

Następnie tworzysz funkcję, która pozycjonuje podpowiedź z przesunięciem elementu DOM, który wyzwolił zdarzenie najechania myszą, jest to możliwe za pomocą css.

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

Chociaż qTip (zaakceptowana odpowiedź) jest dobra, zacząłem go używać i brakowało mu niektórych funkcji, których potrzebowałem.

Natknąłem się wtedy na PoshyTip - jest bardzo elastyczny i naprawdę łatwy w użyciu. (I mogłem zrobić to, czego potrzebowałem)

Ok, po pracy jestem w stanie wyskoczyć i zniknąć w odpowiednim momencie. Jest DUŻO stylizacji, które wciąż muszą się wydarzyć, ale jest to zasadniczo kod, którego użyłem.

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

Oto fragment kodu HTML, który się z tym wiąże:

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

Zaprogramowałem użyteczną wtyczkę jQuery do tworzenia łatwych w obsłudze inteligentnych okienek wyskakujących z tylko linią kodu w jQuery!

Co możesz zrobić: - dołącz wyskakujące okienka do dowolnego elementu DOM! - automatyczne zarządzanie zdarzeniami najechania myszą / przesunięciem myszy - ustaw niestandardowe zdarzenia w wyskakujących okienkach! - twórz inteligentne zacienione wyskakujące okienka! (w IE też!) - wybierz szablony stylu popup w czasie wykonywania! - wstaw wiadomości HTML do wyskakujących okienek! - ustaw wiele opcji jak: odległości, prędkość, opóźnienia, kolory…

Cienie Popup i kolorowe szablony są w pełni obsługiwane przez Internet Explorer 6+, Firefox, Opera 9+, Safari

Możesz pobrać źródła z http://plugins.jquery.com/project/jqBubblePopup

QTip ma błąd w jQuery 1.4.2. Musiałem przełączyć się na jQuery Bubble Pop up http://www.vegabit.com/jquery_bubble_popup_v2/#examples i działa świetnie!

Wydaje mi się, że nie chcesz najeżdżać kursorem myszy na zdarzenia: chcesz zdarzenie hover () jQuery.

Wydaje się, że potrzebujesz „bogatej” podpowiedzi, w takim przypadku sugeruję podpowiedź jQuery . Dzięki opcji bodyHandler możesz wstawić dowolny kod HTML.

Próbuję utworzyć „bąbelek”, który wyskakuje, gdy zostanie uruchomione zdarzenie onmouseover i pozostanie otwarty tak długo, jak długo kursor znajduje się nad elementem, który wywołał zdarzenie onmouseover LUB jeśli mysz zostanie przeniesiona do bańki. Moja bańka musi mieć wszystkie sposoby HTML i styl, w tym hiperłącza, obrazy itp.

Wszystkie te wydarzenia w pełni zarządzane przez tę wtyczkę ...

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

ColorTip jest najpiękniejszym, jaki kiedykolwiek widziałem

Nowa wersja 3.0 wtyczki jQuery Bubble Popup obsługuje jQuery v.1.7.2, obecnie najnowszą i stabilną wersję najsłynniejszej biblioteki javascript.

Najbardziej interesującą cechą wersji 3.0 jest to, że możesz używać razem wtyczki jQuery i Bubble Popup z dowolnymi innymi bibliotekami i frameworkami javascript, takimi jak Script.aculo.us, Mootols lub Prototype, ponieważ wtyczka jest całkowicie hermetyzowana, aby zapobiec problemom z niekompatybilnością;

jQuery Bubble Popup został przetestowany i obsługuje wiele znanych i „nieznanych” przeglądarek; pełną listę znajdziesz w dokumentacji.

Podobnie jak poprzednie wersje, wtyczka jQuery Bubble Popup jest nadal wydawana na licencji MIT; Możesz używać jQuery Bubble Popup w projektach komercyjnych lub osobistych, o ile nagłówek praw autorskich pozostanie nienaruszony.

pobierz najnowszą wersję lub odwiedź pokazy na żywo i samouczki pod adresem http://www.maxvergelli.com/jquery-bubble-popup/

Autorezacja prostego 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 to także fajna biblioteka.

Możesz do tego użyć qTip; Jednak musiałbyś trochę zakodować, aby uruchomić go po zdarzeniu najechania myszą; A jeśli chcesz mieć domyślny znak wodny w polach tekstowych, musisz użyć wtyczki znaku wodnego ...

Zdałem sobie sprawę, że prowadzi to do wielu powtarzalnych kodów; Napisałem więc wtyczkę na górze qTip, która bardzo ułatwia dołączanie wyskakującego okienka informacyjnego do pól formularza. Możesz to sprawdzić tutaj: https://bitbucket.org/gautamtandon/jquery.attachinfo

Mam nadzieję że to pomoże.