আমি কীভাবে গতিশীলভাবে তৈরি উপাদানগুলিতে টুইটার বুটস্ট্র্যাপ টুলটিপগুলিকে আবদ্ধ করব?

Question

আমি নীচের মতো জাভাস্ক্রিপ্টের সাথে টুইটার বুটস্ট্র্যাপ টুলটিপস ব্যবহার করছি:

$('a[rel=tooltip]').tooltip();

আমার মার্কআপটি এর মতো দেখাচ্ছে:

<a rel="tooltip" title="Not implemented" class="btn"><i class="icon-file"></i></a>

এটি সূক্ষ্মভাবে কাজ করে, তবে আমি <a>উপাদানগুলিকে গতিশীলভাবে যুক্ত করি এবং এই গতিশীল উপাদানগুলির জন্য সরঞ্জামদণ্ডগুলি প্রদর্শিত হচ্ছে না। আমি জানি কারণ এটি কেবলমাত্র টুটিটিপ () একবার বাঁধাই যখন ডকুমেন্টটি সাধারণ jquery $(document).ready(function()কার্যকারিতা সহ লোড শেষ হয়।

আমি কীভাবে এটি গতিশীলভাবে তৈরি উপাদানগুলিতে আবদ্ধ করতে পারি? সাধারণত আমি এটি jquery লাইভ () পদ্ধতিতে করতাম। যাইহোক, আমি আবদ্ধ করতে ব্যবহৃত ইভেন্টটি কি? আমি ঠিক নিশ্চিত না কীভাবে jquery .live () দিয়ে বুটস্ট্র্যাপ। টোলটিপ () আটকানো যায়।

আমি এই কাজটি করার একটি উপায় খুঁজে পেয়েছি এরকম কিছু:

/* Add new 'rows' when plus sign is clicked */
$("a.add").live('click', function () {
    var clicked_li = $(this).parent('li');
    var clone = clicked_li.clone();

    clone.find(':input').each(function() {
        $(this).val('');
    });

    clicked_li.after(clone);
    $('a[rel=tooltip]').tooltip();
});

এটি কাজ করে তবে একরকম হ্যাকিশ বলে মনে হয়। আমি ঠিক একই .tooltip () লাইনে $ (প্রস্তুত) কলটিতে কল করছি। সুতরাং, পৃষ্ঠাটি লোড হওয়ার পরে যে উপাদানগুলি উপস্থিত রয়েছে এবং সেই নির্বাচকটি দুটি বার টুটিটিপটি দিয়ে শেষ হবে?

আমি এই পদ্ধতির সাথে কোনও সমস্যা দেখছি না। আমি কেবল একটি সেরা অনুশীলন বা আচরণের বোঝার জন্য সন্ধান করছি।

Comments

হুম ভাল প্রশ্ন, এই সাহায্য করবে? github.com/twitter/bootstrap/issues/2374

— টিম

এটি একটি আকর্ষণীয় পঠনযোগ্য, তবে আমি কেবল একক ধরণের টুলটিপ চাই। আমি কেবলমাত্র তা নিশ্চিত করতে চাই যে কোনও গতিযুক্ত যুক্ত উপাদানগুলি যা টুলটিপ সিলেক্টারের সাথে মেলে, সেগুলি যোগ হয়ে যায়, যা ঘটনাটি নয়।

— durden2.0

দুর্দান্ত প্রশ্ন। টুইটারের পক্ষ থেকে একটি ওভারসাইটের মতো মনে হচ্ছে।

— লুক

@ durden2.0 খ্রিস্টানরা আপনার পক্ষে কীভাবে উত্তর দেয়? সঠিক হিসাবে গ্রহণ করতে যত্নশীল?

— রুস্লানস উরলভস

আপনার প্রশ্নের সাথে সত্যিই সম্পর্কিত নয় তবে ... relগুণটি হাইজ্যাক করা আমার খারাপ শৈলী বলে মনে হচ্ছে। এটি অ-শব্দার্থক এবং এটি হ্যাক হিসাবে এক দশক আগে উত্পন্ন হয়েছিল। আজকাল, প্রতিটি একক ব্রাউজার বেশ কয়েক বছর পিছনে ফিরে যাওয়া data-*বৈশিষ্ট্যগুলিকে সমর্থন করে এবং সেগুলি ব্যবহার না করার কোনও কারণ নেই।

— টি

Answer 1

আর একবার চেষ্টা কর:

$('body').tooltip({
    selector: '[rel=tooltip]'
});

Comments

গ্রেট। এটি সঠিক উত্তর, কারণ এটি মূলত লাইভ / অনের বিকল্প।

— মাহন

@ ক্যালভিনএল যদি কোনও নির্বাচক সরবরাহ করা হয় তবে টুলটিপ অবজেক্টগুলি নির্দিষ্ট লক্ষ্যগুলিতে অর্পণ করা হবে।

— টেরি

এই সমাধানটি সম্পর্কে আমি যা পছন্দ করি না তা হ'ল আপনার কাছে টুলটিপসের একাধিক কনফিগারেশন থাকতে পারে না। উদাহরণস্বরূপ, আপনার যদি এমন টুলটিপস রয়েছে যা উপরে রাখে এবং নীচে রাখা অন্যগুলি থাকে তবে এটি কাজ করে না।

— বার্বোলো

@ বার্বোলো, বিভিন্ন কনফিগারেশনের জন্য কেবল বিভিন্ন নির্বাচক ব্যবহার করুন। এটিই সঠিক সমাধান। বিটিডব্লিউ, এটি পপওভারের সাথেও কাজ করে।

— এনরিকো কারলেসো

বুটস্ট্র্যাপ 3 $ ('বডি') ব্যবহার করে tool

— মের্ট দোয়ান

Answer 2

আপনি যদি একাধিক টুলটিপ কনফিগারেশনগুলি শুরু করতে চান তবে এটি আমার পক্ষে ভাল কাজ করে।

$("body").tooltip({
    selector: '[data-toggle="tooltip"]'
});

তারপরে আপনি dataগুণাবলী ব্যবহার করে পৃথক উপাদানগুলিতে সম্পত্তি সেট করতে পারেন ।

Comments

দুর্দান্ত টিপ। আমাকে এটিকে $ ("বডি") এ পরিবর্তন করতে হয়েছিল tool টুলটিপ ({নির্বাচক: '[ডেটা-টগল = "টুলটিপ"]'});

— জাফিন

বুটস্ট্র্যাপ 3 এর সাথে এটি হওয়া উচিত Great দুর্দান্ত!

— ভয়ানক

মহান! টেবিলের ভিতরে ব্যবহারের জন্য ধারক যুক্ত করুন: অতিরিক্ত প্রস্থ এড়াতে 'বডি'।

— shock_gone_wild

এটি সত্যিই ভাল কাজ করে। আমি একটি গতিশীল টেবিলে পুরো গোছা জিনিস চেষ্টা করেছিলাম তবে এ পর্যন্ত কিছুই কার্যকর হয়নি।

— অ্যানবিসউ

পাশাপাশি বুটস্ট্র্যাপ 4 কাজ করে!

— ইউজিন কুলাবহভ

Answer 3

আমার জন্য, কেবল মাউসেন্টার ইভেন্টটি ধরা কিছুটা বগি ছিল এবং টুলটিপটি সঠিকভাবে প্রদর্শন / লুকিয়ে রাখছিল না। আমাকে এটি লিখতে হয়েছিল এবং এটি এখন নিখুঁতভাবে কাজ করছে:

$(document).on('mouseenter','[rel=tooltip]', function(){
    $(this).tooltip('show');
});

$(document).on('mouseleave','[rel=tooltip]', function(){
    $(this).tooltip('hide');
});

Comments

কেন .on ('হোভার') সঠিকভাবে কাজ করবে না তা জানার জন্য এটি অত্যন্ত সহায়ক ছিল।

— আদম

আমার হ্যান্ডেলবার্স.জেএস ব্যবহারের প্রয়োগের জন্য আমার যা প্রয়োজন তা ছিল। যদি আমি হ্যান্ডেলবার্স.জেএস ব্যবহার না করতাম, গৃহীত উত্তরগুলিও কাজ করে।

— এইচপিডাব্লুডি

এইভাবে আমি এটি করতাম তবে আপনি হোভার বিলম্বের মতো অনেকগুলি বিকল্প হারাবেন যা আমার মনে হয় এটির সাহায্যে আপনাকে নিজে প্রয়োগ করতে হবে implement

— ডেভিডশেচার

Answer 4

আমি এখানে দীর্ঘ উত্তর পোস্ট করেছি: https://stackoverflow.com/a/20877657/207661

টিএল; ডিআর: আপনার কেবলমাত্র একটি লাইন কোডের প্রয়োজন যা নথির প্রস্তুত ইভেন্টে চলে:

$(document.body).tooltip({ selector: "[title]" });

অন্যান্য উত্তরে প্রস্তাবিত আরও জটিল কোড প্রয়োজনীয় বলে মনে হচ্ছে না (আমি এটি বুটস্ট্র্যাপ 3.0 দিয়ে পরীক্ষা করেছি)।

Comments

এটি সেরা উত্তর।

— ক্রিস মেরিসিক

এটি আমার মামলার পক্ষে কাজ করেছে। আমি টেবিলসোর্টার ২.২26.২ সহ একটি টেবিল এবং অ্যাজাক্স কলের মাধ্যমে জনবহুল মান ব্যবহার করেছি। সমস্যাটি হ'ল এইচটিএমএল টুলটিপটি রেন্ডার আউটপুটটির পরিবর্তে এইচটিএমএল পাঠ্য হিসাবে দেখানো হয়েছিল। প্রথম বারে আমার জন্য এটিই একমাত্র সমাধান কাজ করেছিল। +1 এবং অনেক ধন্যবাদ!

— অনুরাগ

Answer 5

আমার জন্য, এই জেএস একই সমস্যা পুনরুত্পাদন করে যা পাওলার সাথে ঘটে

আমার সমাধান:

$(document.body).tooltip({selector: '[title]'})
.on('click mouseenter mouseleave','[title]', function(ev) {
    $(this).tooltip('mouseenter' === ev.type? 'show': 'hide');
});

Answer 6

বরং এটি পুরো দেহে অনুসন্ধান করুন। এমন একটি পরিস্থিতিতে ইতিমধ্যে উপলব্ধ গতিশীল শিরোনাম বিকল্পটি আমি ব্যবহার করতে পারি বলে মনে করি:

$btn.tooltip({
  title: function(){
    return $(this).attr('title');
  }
});

Answer 7

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

$('body').on('mouseenter', '[rel=tooltip]', function(){
  var el = $(this);
  if (el.data('tooltip') === undefined) {
    el.tooltip({
      placement: el.data("placement") || "top",
      container: el.data("container") || false
    });
  }
  el.tooltip('show');
});

$('body').on('mouseleave', '[rel=tooltip]', function(){
  $(this).tooltip('hide');
});

প্রাসঙ্গিক এইচটিএমএল:

<button rel="tooltip" class="btn" data-placement="bottom" data-container=".some-parent" title="Show Tooltip">
    <i class="icon-some-icon"></i>
</button>