বোতাম স্ট্র্যাপের সরঞ্জামটিপ বোতাম ক্লিক ও মাউসলেভের পরে অদৃশ্য হয় না

Question

বুটস্ট্র্যাপের টুলটিপ নিয়ে আমার সমস্যা আছে: আমি যখন একটি বোতামে ক্লিক করি তখন টুলটিপটি কার্সার বোতামের বাইরে থাকলেও থাকে s আমি ম্যানুয়ালটি দেখেছি - বুটস্ট্র্যাপের টুলটিপ এবং যদি আমি বোতামগুলিতে ক্লিক করি তবে আমি একই সমস্যা দেখতে পাচ্ছি। এটি সমাধান করার কোনও সমাধান আছে কি? স্রেফ সর্বশেষতম এফএফ, আই.ই.

Comments

এটি আমার প্রশ্নের লিঙ্কেও কাজ করছে না, আসুন সেখানে দেখি। একই সমস্যা আছে।

— সাইলেন্টক্রি

Answer 1

triggerসেট করা হয়নি কারণ এটি। ট্রিগার জন্য ডিফল্ট মান 'hover focus'থাকা অবধি অন্য বোতাম, ক্লিক করা হয় কারণ বোতাম হয়, এইভাবে টুলটিপ একটি বাটন পরে দৃশ্যমান থাকার ক্লিক করা হয়, focused।

সব আপনাকে যা করতে হবে তাই সংজ্ঞায়িত হয় triggerযেমন 'hover'শুধুমাত্র। বোতামটি ক্লিক করার পরে টুলটিপগুলি স্থির না করে আপনি একই উদাহরণের সাথে লিঙ্ক করেছেন:

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

একটি পোড়ায় নথির উদাহরণ -> http://jsfiddle.net/vdzvvg6o/

Comments

আপনাকে ধন্যবাদ ডেভিড, এটি সত্যিই কাজ করে। আমি শেষ পর্যন্ত টুলটিপের জন্য ট্রিগার বিকল্পটি ভুল বুঝেছিলাম, এখন আমি ঠিক আছি।

— সাইলেন্টক্রি

@ সাইলেন্টক্রি কেবল আপনি কে লক্ষ্য করছেন তা মনে রাখবেন, "হোভার" ট্রিগার করা সর্বদা সহজ / সাধারণ নাও হতে পারে।

— পিএইচকে

@ ডেভিডকনরড মোবাইল প্ল্যাটফর্ম, অন্ধ ব্যবহারকারীগণ। তারা ডিফল্ট হিসাবে কেন 'হোভার ফোকাস' সেট করে তাও ব্যাখ্যা করতে পারে।

— phk

@ এফ কে কে, বুটস্ট্র্যাপের মোবাইল-প্রথম না হয়ে সাধারণ সমস্যা রয়েছে, অন্ধ লোকদের সম্পর্কে আমাদের আরিয়া-গুণাবলী ব্যবহার করা উচিত। কানাডিয়ান কর্তৃপক্ষের বেশ কয়েকটি "স্তর" সমেত আপনি পূরণ করতে পারেন -> 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

আমি কেবল টেলিক কেন্দো গ্রিড বোতামগুলির সাথে সমস্যা হচ্ছিলাম। আমি যখন একটি ক্লিক করেছি, তখন টুলটিপটি আড়াল করবে না। এটি সমাধান!

— 81

Answer 4

আমার ক্ষেত্রে ইস্যুটি কেবলমাত্র ইন্টারনেট এক্সপ্লোরারে পুনরুত্পাদন করা হয়েছিল: কোন এলিমেন্টের (ইনপুট, ডিভ ইত্যাদি ...) টুলটিপ রয়েছে তা বিবেচনাধীন- যদি ক্লিক করা থাকে- টুলটিপটি দেখানো হয়।

ওয়েবে এমন কিছু সলিউশন পাওয়া গেছে যা সুপারিশ করে h হাইড () উপাদানগুলির টুলটিপ ইভেন্ট ক্লিক করুন Click তবে এটি খারাপ ধারণা the একই উপাদানটিতে ফিরে যাওয়া - এটি লুকিয়ে রাখে ... আমার ক্ষেত্রে

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

সমস্ত যাদু তৈরি করেছে !!! - যেখানে .myToolTidedElement হল এমন উপাদান যা কোর্সের একটি টুলটিপ রয়েছে ...

Comments

আমার পক্ষেও কাজ করে এবং টুলটিপটি ফোকাসে প্রদর্শন চালিয়ে যাওয়ার গ্রহণযোগ্য সমাধানের চেয়ে সুবিধা রয়েছে।

— ডেভিড স্টোজিক

Answer 5

বুটস্ট্র্যাপ 4 এবং jquery সহ কৌনিক 7 এ আমি এটি পেয়েছি এবং এটি সূক্ষ্মভাবে কাজ করে। আমি নিষ্পত্তি ব্যবহার করেছি কারণ এটি ধ্বংস করে দেয় টুলটিপটি লুকায় না।

  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"ট্রিগার শর্তটিকে হোভার হিসাবে সেট করেছিলাম যা আমার ক্ষেত্রে কাজ করে না। আমি যখন আমার ডেটা সিলেক্টরটি পরিবর্তন করেছি তখন এটি কাজ করেছিল।

এইচটিএমএল কোড:

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

জেএস কোড // টুলটিপ $ ('। বিটিএন')। টুলটিপ ({ট্রিগার: 'হোভার'});

এটি অবশ্যই আটকে থাকা সরঞ্জামটিপটি সরিয়ে ফেলবে।

Answer 7

ডেভিডের উপরের উত্তরটি আমার সমস্যা সমাধানে সহায়তা করেছিল। আমি বোতামে হোভার এবং ক্লিক ইভেন্ট উভয়ই ছিল। ম্যাকের ফায়ারফক্স আমার ইচ্ছা মতো আচরণ করেছিল। অর্থাত্, হোভার করার সময় টুলটিপ প্রদর্শন করুন, ক্লিকের জন্য সরঞ্জামদণ্ডটি প্রদর্শন করবেন না। অন্যান্য ব্রাউজার এবং ওএস-এ, আমি যখন ক্লিক করি তখন টুলটিপটি উপস্থিত হয় এবং শো হিসাবে থাকে। এমনকি আমি হোভারের জন্য মাউসটিকে অন্য বোতামে স্থানান্তরিত করি। এটি আমার ছিল:

$('[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 ছাড়া বাস্তবায়ন ব্যতীত)? আমি উত্তরটি সহায়ক হওয়ার জন্য কিছু ব্যাখ্যা যুক্ত করার পরামর্শ দিচ্ছি। শুভেচ্ছা

— YakovL

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

আমার সমস্যা ডেটা টেবিলের মধ্যে রয়েছে। নীচের কোডটি আমার জন্য কাজ করে।

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

আমি বুটস্ট্র্যাপ ডক্স থেকে এই নিয়মটি মানছিলাম না:

ডিওএম থেকে তাদের সম্পর্কিত উপাদানগুলি সরানোর আগে সরঞ্জামচালনাগুলি অবশ্যই আড়াল করা উচিত।

Answer 18

এটি নিম্নলিখিত যুক্ত করে এইচটিএমএল এ অর্জনযোগ্য:

 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

একটি বাধ্যতামূলক অস্পষ্টতা () ব্যবহার করে ব্যবহারকারীর অভিজ্ঞতা হ্রাস করার পক্ষে শক্তি রয়েছে। আমি এটা করব না। আমি দেখতে পেলাম যে "ডেটা-অরিজিনাল-শিরোনাম" মুছে ফেলার পাশাপাশি "ডেটা-টগল" এবং "শিরোনাম" বৈশিষ্ট্যগুলি আমার জন্য কাজ করেছে removing

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