jQuery पॉपअप बबल / टूलटिप [बंद]

Question

मैं एक "बबल" बनाने की कोशिश कर रहा हूं जो onmouseoverइवेंट को निकाल दिए जाने पर पॉपअप कर सकता है और जब तक माउस उस आइटम पर खत्म नहीं हो जाता है जो onmouseoverइवेंट को फेंक देता है या अगर माउस को बबल में ले जाया जाता है। मेरे बुलबुले को HTML और स्टाइलिंग के सभी मैनर्स की आवश्यकता होगी जिसमें हाइपरलिंक, चित्र आदि शामिल हैं।

मैंने मूल रूप से बदसूरत जावास्क्रिप्ट की लगभग 200 पंक्तियों को लिखकर इसे पूरा किया है, लेकिन मैं वास्तव में इसे साफ करने के लिए एक jQuery प्लगइन या किसी अन्य तरीके से खोजना चाहूंगा।

Comments

@bluefeet विषय बंद? गंभीरता से? उस आदमी ने एक सवाल पूछा कि JQuery का उपयोग करके कोड की 200 लाइनों को कैसे छोटा किया जाए, और इसका उपयोग लगभग एक मिलियन बार किया गया है (बस मेरी समस्या हल हो गई है) और आप इसे विषय से चिह्नित करते हैं? इस बारे में किसी भी अन्य प्रश्न की तुलना में किसी भी अधिक सुविचारित उत्तर को क्या कहते हैं?

— क्रिस शार्प

@ChrisSharp क्या आपने इसका कारण पढ़ा कि इसे बंद क्यों किया गया? यह विशेष रूप से "फैंसी बुलबुले करने के लिए एक अच्छा jQuery प्लगइन" के लिए पूछता है। सिफारिशों के लिए पूछे जाने वाले प्रश्न ऑफ़-टॉपिक हैं, लेकिन अगर आपको लगता है कि इसे ऑन-टॉपिक बनाने के लिए इसे फिर से लिखा जा सकता है, तो इसे संपादित करने के लिए स्वतंत्र रूप से सुझाव दें।

— टैरिन

Answer 1

Qtip सबसे अच्छा एक मैंने देखा है। यह एमआईटी लाइसेंस प्राप्त है, सुंदर है, आपके लिए आवश्यक सभी कॉन्फ़िगरेशन हैं।

मेरा पसंदीदा हल्का विकल्प टिप्पी है । साथ ही MIT को लाइसेंस दिया। इसने बूटस्ट्रैप के टूलटिप प्लगइन को प्रेरित किया ।

Comments

अभी तक का सबसे अच्छा। कोड की एक पंक्ति बनाम अन्य सभी विशाल समाधान जो दूसरों ने पेश किए हैं। मुझे उम्मीद है कि इस प्रतिक्रिया को वोट दिया जाएगा।

— पीटर वॉक

Qtip में jQuery 1.4+ के साथ संगतता समस्याएं हैं। सरल एक-लाइन फिक्स को qTip प्लग में ठीक करता है, हालांकि। यहां देखें: craigsworks.com/projects/forums/…

— tchaymore

मैंने आज Qtip को देखा और जब यह काम करता है तो कुछ डाउन साइड्स होते हैं: थोड़ी देर में अपडेट नहीं किया गया है, गायब है या कुछ स्पष्ट चीजों का दस्तावेजीकरण नहीं किया है (टिप के साथ कॉल करने वाले फ़ंक्शन के साथ टूल टिप टेक्स्ट बनाना चाहते हैं) प्रदर्शित किया जाता है) और एक भारी डाउनलोड है (आंशिक रूप से क्योंकि इसमें बहुत सारे सामान शामिल हैं जैसे गोल कोने की स्टाइलिंग)। उम्मीद है कि नकारात्मक के रूप में नहीं देखा जा सकता है - बस किसी और को कुछ समय बचाने की कोशिश कर रहा है। निश्चित रूप से विचार करने लायक है लेकिन कुछ डाउनसाइड हैं।

— सेमेन

@ कायमन, मैं यह नहीं बोल सकता कि कैसे चीजें 10 के लगभग वर्ग थीं। लेकिन आप जो भी कहते हैं, उसमें से कोई भी सच नहीं है। यह है: सक्रिय, अच्छी तरह से प्रलेखित, और बहुत अनुकूलन योग्य डाउनलोड के लिए अनुमति देता है एक ला jQuery यूआई।

— Kirk Woll

Answer 2

यह आसानी से माउसओवर इवेंट के साथ भी किया जा सकता है। मैं यह कर चुका हूँ और यह 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-element की ऑफसेट स्थिति से जोड़ते हैं जो माउसओवर इवेंट को ट्रिगर करता है, यह css के साथ उल्लेखनीय है।

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

Comments

सरल और उपयोगी, जब आप इसे आसानी से लिख सकते हैं तो XX ko प्लगइन की कोई आवश्यकता नहीं है। पुनश्च: स्थिति: निरपेक्ष याद आ रही है :)

— kheraud

आप शायद अपने पूर्णांक में "px" इकाइयों को जोड़ना चाहते हैं। 'top': tPosY + 'px'और इसी तरह।

— रोबस्टो

$ ('स्पैन.क्लिकमे') - यह खराब है :)

— स्वरूप

मुझे आपका दृष्टिकोण पसंद है। किसी भी बाहरी पुस्तकालय का उपयोग किए बिना बहुत आसान तरीका

— AMIC MING

Answer 3

हालाँकि qTip (स्वीकृत उत्तर) अच्छा है, मैंने इसका उपयोग करना शुरू कर दिया, और इसमें कुछ विशेषताओं का अभाव था जिनकी मुझे आवश्यकता थी।

मैंने तब पॉशीटाइप पर ठोकर खाई - यह बहुत लचीला है, और वास्तव में उपयोग करने में आसान है। (और मैं वह कर सकता था जिसकी मुझे आवश्यकता थी)

Answer 4

ठीक है, कुछ काम के बाद मैं पॉप करने के लिए "बबल" प्राप्त करने में सक्षम हूं और सभी सही समय पर चला जाता हूं। स्टाइल की एक बहुत कुछ है जो अभी भी होने की जरूरत है लेकिन यह मूल रूप से कोड है जिसका मैंने उपयोग किया था।

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

Answer 5

मैंने jQuery में केवल एक लाइन के साथ आसानी से स्मार्ट बबल पॉपअप बनाने के लिए एक उपयोगी jQuery प्लगइन प्रोग्राम किया है!

आप क्या कर सकते हैं: - पॉपअप को किसी भी DOM एलिमेंट से जोड़ दें! - माउसओवर / माउसआउट इवेंट स्वचालित रूप से प्रबंधित! - कस्टम पॉपअप घटनाओं सेट! - स्मार्ट छायांकित पॉपअप बनाएं! (IE में भी!) - रनटाइम पर पॉपअप के स्टाइल टेम्प्लेट चुनें! - पॉपअप के अंदर HTML संदेश डालें! - के रूप में कई विकल्प सेट करें: दूरी, वेग, देरी, रंग…

पॉपअप की छाया और रंगीन टेम्पलेट पूरी तरह से इंटरनेट एक्सप्लोरर 6+, फ़ायरफ़ॉक्स, ओपेरा 9+, सफारी द्वारा समर्थित हैं

आप http://plugins.jquery.com/project/jqBubblePopup से स्रोत डाउनलोड कर सकते हैं

Answer 6

क्यूटीपी में jQuery 1.4.2 के साथ बग है। मुझे http://www.bgabit.com/jquery_bubble_popup_v2/#examples पर jQuery के बबल पॉप पर स्विच करना पड़ा और यह बहुत अच्छा काम करता है!

Answer 7

मुझे लगता है कि आप घटनाओं पर माउस नहीं चाहते हैं: आप jQuery हॉवर () घटना चाहते हैं।

और जो आप चाहते हैं वह एक "अमीर" टूलटिप है, जिस स्थिति में मैं सुझाव देता हूं कि jQuery टूलटिप । बॉडीहैंडलर विकल्प के साथ आप मनमाने ढंग से HTML डाल सकते हैं।

Comments

हे, सुपर-त्वरित प्रतिक्रिया के लिए धन्यवाद! मैंने सिर्फ प्रलेखन के माध्यम से स्किम किया और मुझे यकीन नहीं है कि "टूलटिप" के लिए एक निश्चित स्थिति में रहने का विकल्प है ताकि आप अपने माउस को उस पर ले जा सकें और एक लिंक पर क्लिक कर सकें। क्या आपने इससे पहले इसका इस्तेमाल किया है? इस बीच मैं डाउनलोड करूँगा और खेलना शुरू करूँगा

— jakejgordon

Answer 8

मैं एक "बबल" बनाने की कोशिश कर रहा हूं, जब ऑनमूवर इवेंट को निकाल दिया जाता है और पॉपअप हो सकता है और जब तक माउस ऑम्मुबॉवर इवेंट में फेंक दिया जाता है या माउस बबल में चला जाता है, तब तक खुला रहेगा। मेरे बबल में html और स्टाइलिंग के सभी मैनर्स होने चाहिए, जिनमें हाइपरलिंक, चित्र आदि शामिल हैं।

उन सभी घटनाओं को पूरी तरह से इस प्लगइन द्वारा प्रबंधित ...

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

Comments

यह लिंक अब अच्छा नहीं है ...

— प्रेस्कॉट चार्टिएर

Answer 9

ColorTip सबसे सुंदर मैंने कभी देखा है

Answer 10

JQuery के बबल पॉपअप प्लगइन का नया संस्करण 3.0 jQuery v.1.7.2 का समर्थन करता है, वर्तमान में सबसे प्रसिद्ध जावास्क्रिप्ट लाइब्रेरी का नवीनतम और स्थिर संस्करण है।

3.0 संस्करण की सबसे दिलचस्प विशेषता यह है कि आप jQuery और बबल पॉपअप प्लगइन को किसी अन्य पुस्तकालयों और जावास्क्रिप्ट फ्रेमवर्क जैसे Script.aculo.us, Mootols या प्रोटोटाइप के साथ उपयोग कर सकते हैं क्योंकि प्लगइन असंगति समस्याओं को रोकने के लिए पूरी तरह से समझाया गया है;

jQuery के बबल पॉपअप का परीक्षण किया गया था और बहुत सारे ज्ञात और "अज्ञात" ब्राउज़रों का समर्थन करता है; पूरी सूची के लिए प्रलेखन देखें।

पिछले संस्करणों की तरह, एमआईटी लाइसेंस के तहत jQuery बबल पॉपअप प्लगइन जारी है; जब तक कॉपीराइट हेडर बरकरार नहीं रहता है तब तक आप वाणिज्यिक या व्यक्तिगत परियोजनाओं में jQuery के बबल पॉपअप का उपयोग करने के लिए स्वतंत्र हैं।

नवीनतम संस्करण डाउनलोड करें या http://www.maxvergelli.com/jquery-bubble-popup/ पर लाइव डेमो और ट्यूटोरियल देखें

Answer 11

सरल पॉपअप बबल को ऑटोरेस्ाइज़ करें

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

Answer 12

टिपटिप भी एक अच्छी लाइब्रेरी है।

Answer 13

आप इसके लिए qTip का उपयोग कर सकते हैं; हालाँकि आपको इसे माउसओवर इवेंट पर लॉन्च करने के लिए थोड़ा कोड करना होगा; और यदि आप अपने टेक्स्ट फ़ील्ड पर डिफ़ॉल्ट वॉटरमार्क चाहते हैं, तो आपको वॉटरमार्क प्लगइन का उपयोग करना होगा ...

मैंने महसूस किया कि यह बहुत दोहराव कोड की ओर जाता है; इसलिए मैंने qTip के ऊपर एक प्लगइन लिखा है जो खेतों को बनाने के लिए सूचनात्मक पॉपअप संलग्न करना वास्तव में आसान बनाता है। आप इसे यहां क्लिक कर सकते हैं: https://bitbucket.org/gautamtandon/jquery.attachinfo

उम्मीद है की यह मदद करेगा।