1. घर
  2. सवाल और जवाब
  3. jQuery टूलटिप को बंद करने के लिए कैसे करें

jQuery टूलटिप को बंद करने के लिए कैसे करें

2012-08-07 18 views
5

मैं jQuery के साथ बहुत ही सरल जावास्क्रिप्ट टूलटिप बनाने की कोशिश कर रहा हूं लेकिन मैंने एक ईंट की दीवार मारा है। विचार div के अंदर थोड़ा इनलाइन तत्व (span) होना है। span तत्व में एक छोटे से HTML (छवि और लिंक) के साथ टूलटिप div होगा। span तत्व पर क्लिक करते समय टूलटिप खोला जाना चाहिए और इसके बाहर या टूलटिप के बाहर क्लिक करते समय बंद होना चाहिए।jQuery टूलटिप को बंद करने के लिए कैसे करें

अभी तक, टूलटिप खोलना कोई समस्या नहीं है लेकिन बंद होना है।

<!DOCTYPE HTML> 
<html> 
<head> 
    <title></title> 

    <style> 
     #colors > div { 
      background-color: red; 
      height: 50px; 
      width: 50px; 
      margin: 5px; 
     } 

     #colors > div > span { 
      min-height: 10px !important; 
      min-width: 10px !important; 
      border: 3px solid black; 
      position: relative; 
     } 

     .tooltip { 
      border: 2px solid blue; 
      display: none; 
     } 
    </style> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script> 
     $(function() { 
      // generate boxes and tooltips 
      for (var i = 0; i < 9; i++) { 
       $('#colors').append('<div id="' + i + '"><span><div class="tooltip"><a href="#">add to favorites</a></div></span></div>'); 
      } 

      $('#colors').delegate('span', 'click', function (event) { 
       $(this).children('.tooltip').css({position:'absolute', top:'5px', left:'5px'}).fadeIn(); 
       // bottom one won't work 
       //event.stopPropagation(); 
      }); 

      $(document).delegate('body', 'click', function (event) { 
       var that = this 
       $.each($('.tooltip'), function (index, element) { 
        // it's always visible ... 
        //if ($(element).is(':visible')) { 

        // doesn't work either 
        if ($(element).is(':visible') && $(element).has(event.target).length === 0) { 
         var s = event.target; 

         console.log([($(s) == event.target), event.target, index, element, $(element).has(event.target).length, that]); 
        } 
       }); 
      }); 
     }) 
    </script> 
</head> 
<body> 
<div id="colors"></div> 
</body> 
</html>

मैं अगर क्लिक span और टूलटिप के बाहर है एक तरह से टूलटिप बंद करने के लिए खोजने के लिए प्रतीत नहीं कर सकते हैं।

स्रोत

2012-08-07 Kristian

उत्तर

4

कुछ इस तरह काम करना चाहिए

$('.tooltip').remove();

कॉल करने के लिए अपने परिदृश्य में की जरूरत है बंद करने के लिए ठीक :)

$(document).mouseup(function (e) 
{ 
    var container = $("YOUR CONTAINER SELECTOR"); 

    if (container.has(e.target).length === 0) 
    { 
     container.hide(); 
    } 
});

स्रोत

2012-08-07 07:58:30 pkurek

2

एक टूलटिप तुम कोशिश

$.each($('.tooltip'), function (index, element) { 
    $(this).remove(); 
});

स्रोत

2012-08-07 07:46:26

1

मैं के लिए इस मुद्दे की जांच की मेरी अपनी साइट और मुझे कोई उपयुक्त समाधान नहीं मिला, इसलिए मैंने अपना खुद लिखा। मेरा उपयोग मामला ओपी के लिए थोड़ा अलग है, लेकिन अन्य लोगों को एक ही अवधि की खोज करने में मदद कर सकता है। मुझे एक करीबी लिंक की आवश्यकता है कि केवल मोबाइल प्लेटफ़ॉर्म पर दिखाई देता है। यह उपयोगी है क्योंकि डेस्कटॉप पर, जब आप लक्ष्य तत्व से mouseout पर टूल टिप बंद कर देंगे, लेकिन टच प्लेटफॉर्म पर यह चारों ओर चिपक जाता है।

  • एंकर टैग (a) एक title विशेषता के साथ:

    // Set up tool tips for images and anchors. 
$(document).tooltip({ 
    items: "a[title], img[alt], .toolTip[title], :not(.noToolTip)", 
    track: true, 
    position: { my: "left+15 center", at: "right center" }, 
    content: function() { 
     var element = $(this); 
     var closer = closerLink = ''; 
     if (isMobile()) { 
     closer = ' <br><div onClick="$(this).parent().parent().remove();" style="color: blue; text-decoration: underline; text-align: right;">Close</div>'; 
     closerLink = ' <br>Tap link again to open it.<br><div onClick="$(this).parent().parent().remove();" style="color: blue; text-decoration: underline; text-align: right;">Close</div>'; 
     } 
     // noToolTip means NO TOOL TIP. 
     if (element.is(".noToolTip")) { 
     return null; 
     } 
     // Anchor - use title. 
     if (element.is("a[title]")) { 
     return element.attr("title") + closerLink; 
     } 
     // Image - use alt. 
     if (element.is("img[alt]")) { 
     return element.attr("alt") + closer; 
     } 
     // Any element with toolTip class - use title. 
     if (element.is(".toolTip[title]")) { 
     return element.attr("title") + closer; 
     } 
    } 
}); 

function isMobile() { 
    return (/iPhone|iPod|iPad|Android|BlackBerry/).test(navigator.userAgent); 
}
    मैं यहाँ चीजों के तीन प्रकार लक्षित कर रहा हूं

    ।

  • छवि टैग (img) title विशेषता के साथ।
  • कक्षा toolTip के साथ कोई भी तत्व।
  • और विशेष रूप से कक्षा noToolTip के साथ कोई भी तत्व बहिष्कृत करें।

मैं इस यहाँ लिखा है: JQuery UI tooltip with a close link for mobile

स्रोत

2015-06-18 13:44:25

-3 
$(document).mouseup(function (kamesh) 
{ 
    var container = $("YOUR CONTAINER SELECTOR"); 

    if (container.has(kamesh.target).length === 0) 
    { 
     container.hide(); 
    } 
});

स्रोत

2016-06-09 09:31:15 kamesh

+0

अपने जवाब के लिए एक छोटे से अधिक जानकारी जोड़ने के लिए प्रयास करें। –

संबंधित मुद्दे

 संबंधित मुद्दे