jQuery Popup Bubble / Tooltip [ditutup]

Saya mencoba membuat "gelembung" yang dapat muncul saat onmouseoveracara diluncurkan dan akan tetap terbuka selama mouse berada di atas item yang melemparkan onmouseoveracara ATAU jika mouse dipindahkan ke dalam gelembung. Balon saya harus memiliki semua tata krama dan gaya HTML termasuk hyperlink, gambar, dll.

Pada dasarnya saya telah menyelesaikan ini dengan menulis sekitar 200 baris JavaScript yang jelek tetapi saya sangat ingin menemukan plugin jQuery atau cara lain untuk membersihkannya sedikit.

Qtip adalah yang terbaik yang pernah saya lihat. Ini berlisensi MIT, cantik, memiliki semua konfigurasi yang Anda butuhkan.

Opsi ringan favorit saya adalah tipy . Juga berlisensi MIT. Ini menginspirasi plugin tooltip Bootstrap .

Ini juga dapat dilakukan dengan mudah dengan acara gerakan mouse. Saya telah melakukannya dan tidak perlu 200 baris sama sekali. Mulailah dengan memicu acara, lalu gunakan fungsi yang akan membuat keterangan alat.

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

Kemudian Anda membuat fungsi yang memposisikan tooltip dengan posisi offset elemen DOM yang memicu kejadian gerakan mouse, ini dapat dilakukan dengan css.

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

Meskipun qTip (jawaban yang diterima) bagus, saya mulai menggunakannya, dan kekurangan beberapa fitur yang saya butuhkan.

Saya kemudian menemukan PoshyTip - sangat fleksibel, dan sangat mudah digunakan. (Dan saya bisa melakukan apa yang saya butuhkan)

Oke, setelah beberapa pekerjaan saya bisa mendapatkan "gelembung" untuk muncul dan pergi pada waktu yang tepat. Ada BANYAK penataan yang perlu dilakukan tetapi pada dasarnya ini adalah kode yang saya gunakan.

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

Berikut ini cuplikan html yang menyertainya:

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

Saya telah memprogram Plugin jQuery yang berguna untuk membuat gelembung popup dengan mudah hanya dengan sebaris kode di jQuery!

Yang dapat Anda lakukan: - lampirkan popup ke elemen DOM mana pun! - Peristiwa gerakan mouse / mouseout dikelola secara otomatis! - atur acara popup khusus! - buat popup berbayang cerdas! (di IE juga!) - pilih template gaya popup saat runtime! - masukkan pesan HTML di dalam popup! - mengatur banyak pilihan sebagai: jarak, kecepatan, penundaan, warna…

Bayangan popup dan template berwarna didukung sepenuhnya oleh Internet Explorer 6+, Firefox, Opera 9+, Safari

Anda dapat mengunduh sumber dari http://plugins.jquery.com/project/jqBubblePopup

QTip memiliki bug dengan jQuery 1.4.2. Saya harus beralih ke jQuery Bubble Pop up http://www.vegabit.com/jquery_bubble_popup_v2/#examples dan itu berfungsi dengan baik!

Kedengarannya bagi saya Anda tidak ingin mouse di atas peristiwa: Anda ingin peristiwa jQuery hover ().

Dan yang tampaknya Anda inginkan adalah tooltip "kaya", dalam hal ini saya menyarankan tooltip jQuery . Dengan opsi bodyHandler Anda dapat memasukkan HTML sewenang-wenang.

Saya mencoba membuat "gelembung" yang dapat muncul saat peristiwa onmouseover diaktifkan dan akan tetap terbuka selama mouse berada di atas item yang melemparkan peristiwa onmouseover ATAU jika mouse dipindahkan ke dalam gelembung. Balon saya harus memiliki semua cara html dan gaya termasuk hyperlink, gambar, dll.

Semua acara itu sepenuhnya dikelola oleh plugin ini ...

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

ColorTip adalah yang terindah yang pernah saya lihat

Versi baru 3.0 dari plugin jQuery Bubble Popup mendukung jQuery v.1.7.2, yang saat ini merupakan versi terbaru dan stabil dari pustaka javascript paling terkenal.

Fitur paling menarik dari versi 3.0 adalah Anda dapat menggunakan bersama-sama plugin jQuery & Bubble Popup dengan pustaka lain dan kerangka kerja javascript seperti Script.aculo.us, Mootols atau Prototype karena plugin ini sepenuhnya dikemas untuk mencegah masalah ketidakcocokan;

jQuery Bubble Popup telah diuji dan mendukung banyak browser yang dikenal dan "tidak dikenal"; lihat dokumentasi untuk daftar lengkapnya.

Seperti versi sebelumnya, plugin jQuery Bubble Popup terus dirilis di bawah lisensi MIT; Anda bebas menggunakan jQuery Bubble Popup dalam proyek komersial atau pribadi selama header hak cipta dibiarkan utuh.

unduh versi terbaru atau kunjungi demo dan tutorial langsung di http://www.maxvergelli.com/jquery-bubble-popup/

Autoresize Popup Bubble sederhana

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 juga merupakan perpustakaan yang bagus.

Anda dapat menggunakan qTip untuk ini; Namun Anda harus membuat kode sedikit untuk meluncurkannya pada acara gerakan mouse; Dan jika Anda menginginkan tanda air default pada bidang teks Anda, Anda harus menggunakan plugin tanda air ...

Saya menyadari bahwa ini menyebabkan banyak kode berulang; Jadi saya menulis plugin di atas qTip yang membuatnya sangat mudah untuk melampirkan sembulan informasi ke bidang formulir. Anda dapat memeriksanya di sini: https://bitbucket.org/gautamtandon/jquery.attachinfo

Semoga ini membantu.