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

Question

मुझे बूटस्ट्रैप के टूलटिप के साथ एक समस्या है: जब मैं एक बटन पर क्लिक करता हूं, तो टूलटिप तब भी रहता है, जब कर्सर बटन के बाहर हो। मैंने मैनुअल - बूटस्ट्रैप के टूलटिप पर ध्यान दिया है और यदि मैं बटन पर क्लिक कर रहा हूं, तो मुझे वही समस्या दिखाई दे रही है। क्या इसे ठीक करने का कोई उपाय है? बस नवीनतम एफएफ, IE में कोशिश की।

Comments

यह मेरे प्रश्न के लिंक में भी काम नहीं कर रहा है, आइए वहाँ देखें। वही समस्या है।

— साइलेंट्री

Answer 1

यह इसलिए है क्योंकि triggerसेट नहीं है। ट्रिगर के लिए डिफ़ॉल्ट मान है 'hover focus', इस प्रकार एक बटन क्लिक होने के बाद टूलटिप दिखाई देता है, जब तक कि दूसरा बटन क्लिक नहीं किया जाता है, क्योंकि बटन है focused।

तो आपको बस इतना करना है triggerकि 'hover'केवल परिभाषित करना है । एक बटन क्लिक होने के बाद आप उसी उदाहरण से नीचे हैं, जिसमें आप बिना टूलटिप्स के बने रहते हैं:

$('[data-toggle="tooltip"]').tooltip({
    trigger : 'hover'
})  

एक पहेली में डॉक्टर उदाहरण -> http://jsfiddle.net/vdzvvg6o/

Comments

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

— साइलेंट्री

@SilentCry बस ध्यान रखें कि आप किसे लक्षित कर रहे हैं, "होवर" को ट्रिगर करना हमेशा आसान / सामान्य नहीं हो सकता है।

— phk

@davidkonrad मोबाइल प्लेटफ़ॉर्म, अंधे उपयोगकर्ता। यह भी बता सकते हैं कि उन्होंने डिफ़ॉल्ट के रूप में 'होवर फ़ोकस' क्यों सेट किया।

— phk

@ एफपी, बूटस्ट्रैप में मोबाइल-प्रथम नहीं होने से एक सामान्य समस्या है, अंधे लोगों के बारे में हमें aria- विशेषताओं का उपयोग करना चाहिए। बीटीडब्ल्यू कई प्रकार के "स्तर" के साथ कनाडाई अधिकारियों के लिए विकसित प्रयोज्य के परीक्षण के लिए एक महान उपकरण है जिसे आप पूरा कर सकते हैं -> achecker.ca/checker/index.php मेरे देश में ये मानक नहीं हैं, लेकिन यह उनके पास रखने लायक है वैसे भी।

— दाविद्कोन्राद

आप नीचे कार्मोनिक कोला के उत्तर पर एक नज़र डालना चाहते हैं। यह टूलटिप को फोकस पर दिखाता रहता है।

— डेविड स्टोसिक

Answer 2

मैं एक साल से अधिक पुराना हूं, लेकिन मैं यहां किसी भी उदाहरण के साथ काम नहीं कर सकता। मुझे निम्नलिखित का उपयोग करना पड़ा है:

$('[rel="tooltip"]').on('click', function () {
    $(this).tooltip('hide')
})

यह भी होवर पर टूलटिप को फिर से दिखाता है।

Comments

यह स्वीकृत उत्तर होना चाहिए और बूटस्ट्रैप कोडबेस में भी लागू किया जाना चाहिए।

— kjdion84

यह बूटस्ट्रैप टूलटिप्स के लिए बेहद मददगार था, जो 'हॉवर' के ट्रिगर के साथ बटन पर रखा गया था, जो अतुल्यकालिक पोस्टबैक (यानी डिस्प्ले मोडल पैनल) का कारण बनता है। इसके बिना, बटन प्रेस से पोस्टबैक टूलटिप को "अटक" जाता है और कभी गायब नहीं होता है।

— ब्रैडीकीज

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

— एचपीडब्ल्यूडी

मैं @ kjdion84 से सहमत हूं। मैं तब तक संघर्ष कर रहा हूं जब तक मुझे यह नहीं मिला

— अहमद

Answer 3

नमस्ते, मैं इस मुद्दे के लिए बहुत कम समाधान है। जब अन्य समाधान काम नहीं करते हैं तो केवल यह एक कोशिश करें:

$('body').tooltip({
        selector: '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])',
        trigger: 'hover',
        container: 'body'
    }).on('click mousedown mouseup', '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])', function () {
        $('[data-toggle="tooltip"], [title]:not([data-toggle="popover"])').tooltip('destroy');
    });

यह ड्रैग और ड्रॉप के लिए भी समाधान है। इसलिए मुझे आशा है कि यह किसी की मदद करेगा :)

Comments

मुझे केवल Telerik Kendo ग्रिड बटन की समस्या हो रही थी। जब मैंने एक पर क्लिक किया, तो टूलटिप छिपेगा नहीं। इससे यह हल हो गया!

— जॉन'१

Answer 4

मेरे मामले में इस मुद्दे को केवल इंटरनेट एक्सप्लोरर में पुन: पेश किया गया था: कोई फर्क नहीं पड़ता कि किस तत्व (इनपुट, div आदि ...) में टूलटिप है - अगर क्लिक किया गया - टूलटिप दिखाया गया है।

वेब पर कुछ समाधान पाए गए जो .hide की अनुशंसा करते हैं () तत्वों पर टूलटिप घटना पर क्लिक करें- लेकिन यह बुरा विचार है- एक ही तत्व पर वापस मंडराना - इसे छिपाए रखता है ... मेरे मामले में

$('.myToolTippedElement').on('click', function () {
    $(this).blur()
})

सब जादू कर दिया !!! - जहाँ .myToolTippedElement वह तत्व है जिसमें एक टूलकिट ऑफकोर्स है ...

Comments

मेरे लिए भी काम करता है, और फ़ोकस पर टूलटिप प्रदर्शित करने के स्वीकृत समाधान पर लाभ होता है।

— डेविड स्टोसिक

Answer 5

कोणीय 7 में बूटस्ट्रैप 4 और jquery के साथ मैंने यह पाया और यह ठीक काम करता है। मैंने डिस्पोज़ किया क्योंकि यह नष्ट हो जाता है टूलटिप को नहीं छिपाता है।

  ngAfterViewChecked() {
    $('[data-toggle="tooltip"]').tooltip({
      trigger: 'hover'
    });
    $('[data-toggle="tooltip"]').on('mouseleave', function () {
      $(this).tooltip('dispose');
    });
    $('[data-toggle="tooltip"]').on('click', function () {
      $(this).tooltip('dispose');
    });
   }

Answer 6

मेरे मामले में काम rel="tooltip"करने के बजाय प्रयोग करने का प्रयास करें data-toggle="tooltip"। मैं प्रयोग कर रहा था data-toggle="tooltip"और ट्रिगर स्थिति को भी होवर के रूप में सेट कर दिया था जो मेरे मामले में काम नहीं करता था। जब मैंने अपना डेटा चयनकर्ता बदला, तो यह काम किया।

HTML कोड:

<button id="submit-btn" type="submit" class="btn btn-success" rel="tooltip" title="Click to submit this form">Submit</button>

जेएस कोड // टूलटिप $ ('। बीटीएन'); टूलटिप ({ट्रिगर: 'होवर'});

यह निश्चित रूप से अटक टूलटिप को हटा देगा।

Answer 7

ऊपर डेविड का जवाब मेरी समस्या को ठीक करने में मदद करता है। मेरे पास हॉवर और बटन पर क्लिक करने की घटना है। मैक पर फ़ायरफ़ॉक्स ने जैसा मैं चाहता था वैसा ही व्यवहार किया। यानी होवर के समय टूलटिप दिखाएं, क्लिक के लिए टूलटिप न दिखाएं। अन्य ब्राउज़रों और OS पर, जब मैं क्लिक करता हूं, टूलटिप दिखाई देता है और शो के रूप में रहता है। भले ही मैं माउस को अन्य बटनों पर मंडराने के लिए ले जाऊं। यह मेरे पास है:

$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true}); 

यह तय है:

$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true, trigger: 'hover'}); 

Answer 8

इसके अलावा आप जोड़ सकते हैं:

onclick="this.blur()"

Comments

यह किस तरह से अलग है जो कामोर्निक कोला ने प्रस्तावित किया है (बिना jQuery के कार्यान्वयन को छोड़कर)? मैं मददगार होने के जवाब के लिए कुछ स्पष्टीकरण जोड़ने का सुझाव देता हूं। सबसे अच्छा संबंध

— याकॉव

Answer 9

कार्य समाधान

$(document).on("click",function()
    {
    setTimeout(function()
    {

  $('[data-toggle="tooltip"]').tooltip('hide');

},500);    // Hides tooltip in 500 milliseconds
    });

Comments

हालांकि यह कोड प्रश्न का उत्तर दे सकता है, लेकिन यह कोड क्यों और / या इस प्रश्न का उत्तर देता है के संबंध में अतिरिक्त संदर्भ प्रदान करता है।

— एडम

@ एडम मैं किसी भी <a>, <बटन> या उन अन्य तत्वों पर क्लिक करके टूलटिप को छुपाने के लिए मंचों पर कोई भी कार्यशील समाधान नहीं खोज सका, जिसमें बटन की कार्यक्षमता या उनसे जुड़ी उपस्थिति हो।

— अल्फा

Answer 10

जिस तरह से मैंने इस मुद्दे को तय किया वह निम्न कोड का उपयोग करके क्लिक इवेंट फ़ंक्शन में टूलटिप को हटाकर था:

$("#myButton").on("click", function() {
    $("div[role=tooltip]").remove();
});

Comments

क्या आप टूलटिप को फिर से होवर पर उड़ा सकते हैं?

— विष्णु

Answer 11

मैं साइकल में बूटस्ट्रैप टूलटिप का उपयोग कर रहा हूं। जेएस और उपरोक्त में से कोई भी मेरे लिए काम नहीं करता है।

मुझे यह करना था:

return button( selector + '.btn.btn-sm', 
             {
               hook: {
                 destroy: tooltipOff,
                 insert:  toggleTooltipOn,
               },
....

function toggleTooltipOn(vnode){
  setupJQuery();  
  jQuery[0].$( vnode.elm )
    .tooltip({container:'body', trigger: 'hover');
//container:body is to help tooltips not wiggle on hover
//trigger:hover is to only trigger on hover, not on click
}

function tooltipOff( vnode ){
  setupJQuery();      
  jQuery[0].$( vnode.elm ).tooltip('hide');
}

Answer 12

यह मेरे लिए काम करता है:

$(document).ready(function() {
   $('#save').tooltip({
            trigger : 'hover'
        }) ;

});

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

Comments

यहां सेव मेरे बटन की आईडी है

— देवेंद्र

Answer 13

अपने दस्तावेज़ तैयार फ़ंक्शन के अंदर इसका उपयोग करें

 $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip({
               trigger : 'hover'
            });
    });

Answer 14

इस समाधान ने मेरे लिए काम किया।

$('a[data-toggle="tooltip"]').tooltip({
  animated: 'fade',
  placement: 'bottom',
  trigger: 'click'
});

$('a[data-toggle="tooltip"]').click(function(event){
  event.stopPropagation();
});

$('body').click(function(){
  $('a[data-toggle="tooltip"]').tooltip('hide');
});

बेला

मैंने पिछले उत्तरों में दिए गए अधिकांश समाधानों की कोशिश की, लेकिन उनमें से किसी ने भी मेरे लिए काम नहीं किया।

Answer 15

मेरी समस्या DataTable में है। नीचे कोड मेरे लिए काम करता है।

columnDefs: [ { targets: 0, data: "id", render: function (data, type, full, meta) { return '<a href="javascript:;" class="btn btn-xs btn-default" data-toggle="tooltip" title="Pending" data-container="body"><i class="fa fa-check"></i></a>'; } } ], drawCallback: function() { $('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="tooltip"]').on('click', function () { $(this).tooltip('hide'); }); }

Answer 16

आप नीचे दिए गए टूलटिप को मूसलीव पर छिपाने के लिए नीचे दी गई विधि का भी उपयोग कर सकते हैं:

jQuery("body").on("mouseleave", ".has-tooltip", function(){
    jQuery(this).blur();
});

Answer 17

इसके लिए मेरे मामले में यह तय था:

beforeDestroyingElement() {    
  $('[data-toggle="tooltip"]').tooltip('hide');
}

मैं बूटस्ट्रैप डॉक्स से इस नियम का पालन नहीं कर रहा था:

टूलटिप्स को उनके संबंधित तत्वों को DOM से हटाए जाने से पहले छिपा दिया जाना चाहिए।

Answer 18

यह HTML में निम्नलिखित जोड़कर भी प्राप्त करने योग्य है:

 data-trigger="hover"

 <button type="button" data-toggle="tooltip" data-placement="top" data-trigger="hover" title="To re-enable scanning, click here">Text</button>

Comments

अफसोस की बात है कि यह काम नहीं करता है और टूलटिप अभी भी अटका हुआ है।

— Fwd079

Answer 19

इसके अलावा आप पुराने संस्करणों के लिए इस तरह का उपयोग कर सकते हैं क्योंकि स्वीकृत उत्तर ने मेरे लिए काम नहीं किया है और मैंने इस कोड को अपने स्वयं और इसके काम के लिए अच्छी तरह से लिखा है।

$(document).on('mousedown', "[aria-describedby]", function() {
    $("[aria-describedby]").tooltip('hide');
});

Answer 20

यदि कोई व्यक्ति टूलटिप सेटअप करना चाहता है, जो क्लिक करने के बाद कुछ समय के लिए दिखाई देगा, तो यहां बताया गया है:

$('[data-toggle="tooltip"]').tooltip({
trigger : 'click'})  

$('[data-toggle="tooltip"]').on('shown.bs.tooltip', function () {
$(this).tooltip('hide')
})

Answer 21

उपयोगकर्ता अनुभव को कम करने के लिए एक मजबूर ब्लर () का उपयोग करने की क्षमता है। मैं ऐसा नहीं करूंगा। मैंने पाया कि "डेटा-मूल-शीर्षक" को हटाने के साथ-साथ "डेटा-टॉगल" और "शीर्षक" को हटाकर मेरे लिए काम किया।

    $(id).tooltip('hide');
    $(id).removeAttr("data-toggle");
    $(id).removeAttr("data-original-title");
    $(id).removeAttr("title");