jQuery Popup Bubble / Tooltip [ปิด]

ฉันกำลังพยายามสร้าง "ฟอง" ที่สามารถป๊อปอัปเมื่อonmouseoverเหตุการณ์เริ่มขึ้นและจะยังคงเปิดอยู่ตราบเท่าที่เมาส์อยู่เหนือรายการที่โยนonmouseoverเหตุการณ์หรือหากเลื่อนเมาส์ไปที่ฟอง ฟองของฉันจะต้องมีมารยาทในการใช้ HTML และการจัดรูปแบบรวมทั้งไฮเปอร์ลิงก์รูปภาพ ฯลฯ

โดยพื้นฐานแล้วฉันทำได้สำเร็จโดยเขียน JavaScript ที่น่าเกลียดประมาณ 200 บรรทัด แต่ฉันต้องการหาปลั๊กอิน jQuery หรือวิธีอื่นในการทำความสะอาดเล็กน้อย

Qtip เป็นสิ่งที่ดีที่สุดที่ฉันเคยเห็น เป็นลิขสิทธิ์ของ MIT สวยงามมีการกำหนดค่าทั้งหมดที่คุณต้องการ

ตัวเลือกน้ำหนักเบาที่ฉันชอบคือเคล็ดลับ ยังได้รับใบอนุญาตจาก MIT มันเป็นแรงบันดาลใจปลั๊กอินเคล็ดลับของเงินทุน

ซึ่งสามารถทำได้อย่างง่ายดายด้วยเหตุการณ์ mouseover เช่นกัน ฉันทำไปแล้วและใช้เวลาไม่ถึง 200 บรรทัดเลย เริ่มต้นด้วยการทริกเกอร์เหตุการณ์จากนั้นใช้ฟังก์ชันที่จะสร้างคำแนะนำเครื่องมือ

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

จากนั้นคุณสร้างฟังก์ชันที่วางตำแหน่งคำแนะนำเครื่องมือด้วยตำแหน่งออฟเซ็ตขององค์ประกอบ DOM ที่ทริกเกอร์เหตุการณ์วางเมาส์ซึ่งสามารถทำได้ด้วย css

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

แม้ว่า qTip (คำตอบที่ยอมรับ) จะดี แต่ฉันก็เริ่มใช้มันและมันขาดคุณสมบัติบางอย่างที่ฉันต้องการ

จากนั้นฉันก็สะดุดกับPoshyTip - มันมีความยืดหยุ่นมากและใช้งานง่ายมาก (และฉันสามารถทำในสิ่งที่ต้องการได้)

โอเคหลังเลิกงานฉันจะได้ "ฟอง" โผล่ขึ้นมาและหายไปในเวลาที่เหมาะสม มีรูปแบบมากมายที่ต้องเกิดขึ้น แต่นี่เป็นรหัสที่ฉันใช้

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

นี่คือตัวอย่างของ html ที่มาพร้อมกับมัน:

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

ฉันได้ตั้งโปรแกรมปลั๊กอิน jQuery ที่มีประโยชน์เพื่อสร้างป๊อปอัปบับเบิ้ลอัจฉริยะอย่างง่ายดายด้วยโค้ดเพียงบรรทัดเดียวใน jQuery!

คุณสามารถทำอะไรได้บ้าง: - แนบป๊อปอัปกับองค์ประกอบ DOM! - จัดการเหตุการณ์ mouseover / mouseout โดยอัตโนมัติ! - ตั้งค่าเหตุการณ์ป๊อปอัปที่กำหนดเอง! - สร้างป๊อปอัปเงาอัจฉริยะ! (ใน IE ด้วย!) - เลือกเทมเพลตสไตล์ของป๊อปอัปที่รันไทม์! - แทรกข้อความ HTML ในป๊อปอัป! - ตั้งค่าตัวเลือกมากมายเป็น: ระยะทางความเร็วความล่าช้าสี ...

เงาของป๊อปอัปและเทมเพลตที่มีสีได้รับการสนับสนุนอย่างเต็มที่โดย Internet Explorer 6+, Firefox, Opera 9+, Safari

คุณสามารถดาวน์โหลดแหล่งข้อมูลได้จาก http://plugins.jquery.com/project/jqBubblePopup

QTip มีบั๊กกับ jQuery 1.4.2 ฉันต้องเปลี่ยนไปใช้ jQuery Bubble Pop up http://www.vegabit.com/jquery_bubble_popup_v2/#examplesและใช้งานได้ดีมาก!

สำหรับฉันคุณไม่ต้องการให้เมาส์อยู่เหนือเหตุการณ์: คุณต้องการ jQuery hover () เหตุการณ์

และสิ่งที่คุณดูเหมือนจะต้องการเป็นเคล็ดลับ "รวย" ซึ่งในกรณีนี้ผมขอแนะนำjQuery เคล็ดลับ ด้วยตัวเลือก bodyHandler คุณสามารถใส่ HTML ได้ตามอำเภอใจ

ฉันกำลังพยายามสร้าง "ฟอง" ที่สามารถป๊อปอัปเมื่อเหตุการณ์ที่เกิดขึ้นบนเมาส์โอเวอร์เริ่มทำงานและจะยังคงเปิดอยู่ตราบเท่าที่เมาส์อยู่เหนือรายการที่โยนเหตุการณ์ที่อยู่เหนือเมาส์หรือหากเลื่อนเมาส์ไปที่ฟอง ฟองของฉันจะต้องมีมารยาทในการใช้ html และการจัดรูปแบบรวมถึงการเชื่อมโยงหลายมิติรูปภาพ ฯลฯ

เหตุการณ์ทั้งหมดที่จัดการโดยปลั๊กอินนี้ ...

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

ColorTipสวยที่สุดเท่าที่ฉันเคยเห็นมา

ปลั๊กอิน jQuery Bubble Popup เวอร์ชัน 3.0 ใหม่รองรับ jQuery v.1.7.2 ซึ่งเป็นเวอร์ชันล่าสุดและเสถียรของไลบรารีจาวาสคริปต์ที่มีชื่อเสียงที่สุด

คุณลักษณะที่น่าสนใจที่สุดของเวอร์ชัน 3.0 คือคุณสามารถใช้ปลั๊กอิน jQuery & Bubble Popup ร่วมกับไลบรารีและเฟรมเวิร์กจาวาสคริปต์อื่น ๆ เช่น Script.aculo.us, Mootols หรือ Prototype ได้เนื่องจากปลั๊กอินถูกห่อหุ้มอย่างสมบูรณ์เพื่อป้องกันปัญหาความไม่ลงรอยกัน

jQuery Bubble Popup ได้รับการทดสอบและรองรับเบราว์เซอร์ที่รู้จักและ "ไม่รู้จัก" จำนวนมาก ดูเอกสารสำหรับรายการทั้งหมด

เช่นเดียวกับเวอร์ชันก่อนหน้านี้ปลั๊กอิน jQuery Bubble Popup ยังคงได้รับการเผยแพร่ภายใต้ใบอนุญาต MIT คุณมีอิสระที่จะใช้ jQuery Bubble Popup ในเชิงพาณิชย์หรือโปรเจ็กต์ส่วนบุคคลตราบใดที่ส่วนหัวลิขสิทธิ์ยังคงอยู่

ดาวน์โหลดเวอร์ชันล่าสุดหรือเยี่ยมชมการสาธิตสดและบทช่วยสอนที่ http://www.maxvergelli.com/jquery-bubble-popup/

ปรับขนาดป๊อปอัพบับเบิ้ลง่ายๆ

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ยังเป็นห้องสมุดที่ดี

คุณสามารถใช้ qTip สำหรับสิ่งนี้ อย่างไรก็ตามคุณต้องเขียนโค้ดเล็กน้อยเพื่อเปิดใช้งานในเหตุการณ์วางเมาส์เหนือ และในกรณีที่คุณต้องการลายน้ำเริ่มต้นในช่องข้อความของคุณคุณจะต้องใช้ปลั๊กอินลายน้ำ ...

ฉันตระหนักว่าสิ่งนี้นำไปสู่รหัสซ้ำ ๆ กันมากมาย ดังนั้นฉันจึงเขียนปลั๊กอินที่ด้านบนของ qTip ซึ่งทำให้ง่ายต่อการแนบป๊อปอัปข้อมูลเพื่อสร้างฟิลด์ คุณสามารถตรวจสอบได้ที่นี่: https://bitbucket.org/gautamtandon/jquery.attachinfo

หวังว่านี่จะช่วยได้