অক্ষম বোতামে বুটস্ট্র্যাপ টুলটিপ কীভাবে সক্ষম করবেন?

Question

আমার একটি অক্ষম বোতামে একটি সরঞ্জামটিপ প্রদর্শিত এবং এটি সক্ষম বোতামে সরিয়ে নেওয়া দরকার। বর্তমানে, এটি বিপরীতে কাজ করে।

এই আচরণটি উল্টানোর সর্বোত্তম উপায় কী?

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<hr>
<button class="btn" disabled rel="tooltip" data-title="Dieser Link führt zu Google">button disabled</button>
<button class="btn" rel="tooltip" data-title="Dieser Link führt zu Google">button not disabled</button>

এখানে একটি ডেমো রয়েছে

পিএস: আমি disabledবৈশিষ্ট্যটি রাখতে চাই ।

Comments

যে বোতামটি অক্ষম করা দরকার তা অক্ষম করা আছে ...

— কোউ_আরচ

@ এএইচ_ওয়ার্ক আমি বোতামটি অক্ষম রাখতে চাই তবে একই সাথে ক্লিক ইভেন্টের একটি সরঞ্জামদণ্ড প্রদর্শন করব।

— লোরেন বার্নার্ড

এটি ওপিকে সহায়তা করবে না, তবে ভবিষ্যতের দর্শকরা 'পঠনযোগ্য' বৈশিষ্ট্যটি সমান (যদিও অভিন্ন নয়) এবং মাউসওভারের মতো ব্যবহারকারীর ইভেন্টগুলিকে অবরুদ্ধ করে না তা জেনে প্রশংসা করতে পারে।

— চাক

Answer 1

এখানে কিছু কার্যকারী কোড রয়েছে: http://jsfiddle.net/mihaifm/W7XNU/200/

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

$(".btn").click(function(e) {
    if (! $(this).hasClass("disabled"))
    {
        $(".disabled").removeClass("disabled").attr("rel", null);

        $(this).addClass("disabled").attr("rel", "tooltip");
    }
});

selectorবিকল্পটি সহ একটি প্যারেন্ট এলিমেন্টে টুলটিপ যুক্ত করা এবং তারপরে relবোতামটি সক্ষম / অক্ষম করার সময় অ্যাট্রিবিউটটি যুক্ত / সরিয়ে ফেলার ধারণা ।

Comments

এটি গ্রহণযোগ্য উত্তর কারণ এটি ২০১২ সালে কাজ করেছিল, যখন এটির উত্তর দেওয়া হয়েছিল। তখন থেকে জিনিসগুলি পরিবর্তিত হয়েছে, মূলত ফিডলে ব্যবহৃত বহিরাগত সংস্থানসমূহ। আমি সিডিএন বুটস্ট্র্যাপে নতুন ইউআরএল যুক্ত করেছি, কোড এখনও একই।

— মিহাই

আমি কি বুটস্ট্র্যাপ সংস্করণ 4.1 এর জন্য একটি আপডেট ফিক্স পেতে পারি?

— জেসন আয়ার

Answer 2

আপনি অক্ষম বোতামটি মোড়ানো করতে পারেন এবং টুটিটিপটি মোড়কের উপরে রাখতে পারেন:

<div class="tooltip-wrapper" data-title="Dieser Link führt zu Google">
  <button class="btn btn-default" disabled>button disabled</button>
</div>

যদি মোড়কটি থাকে display:inlineতবে টুলটিপটি কাজ করে না বলে মনে হচ্ছে। ব্যবহার display:blockএবং display:inline-blockসূক্ষ্ম কাজ বলে মনে হচ্ছে। এটি একটি ভাসমান মোড়ক দিয়ে ভাল কাজ করে বলে মনে হয়।

আপডেট আপডেট এখানে একটি আপডেট করা জেএসফিডাল যা সর্বশেষতম বুটস্ট্র্যাপ (3.3.6) এর সাথে কাজ করে। pointer-events: none;অক্ষম বোতামটির জন্য পরামর্শ দেওয়ার জন্য @ জনলহম্যানকে ধন্যবাদ ।

http://jsfiddle.net/cSSUA/209/

Comments

এটি এখানে ডক্স প্রস্তাব দেয় এবং আপনি এখানে প্রস্তাবিত ইনলাইন-ব্লক ট্রিকটি ব্যবহার করলে এটি কাজ করে!

— শয়তানের অ্যাডভোকেট

তবে, যদি আপনার বোতামটি কোনও বোতাম গ্রুপের অংশ হয় তবে বোতামটি মোড়ানো আপনার নান্দনিকতা বন্ধ করে দেয় :( যাইহোক, এই সমস্যাটিকে কাটিয়ে উঠতে btn-group?

— কোডি

কোডি, বিটিএন-গ্রুপগুলির জন্য, আমি পেয়েছি যে আপনি সেগুলি মুড়ে রাখতে পারবেন না, বা তারা সঠিকভাবে রেন্ডার হবে না। আমি 'অটো' -তে পয়েন্টার-ইভেন্টগুলি সেট করেছি (কেবলমাত্র "ডিভ.বিটিএন-গ্রুপ> .btn.dis اهل {পয়েন্টার-ইভেন্টস: অটো; just" কেবলমাত্র ক্ষেত্রে) এর সাথে লক্ষ্য রেখেছি, এবং বোতামটির অনক্লিক ইভেন্টটিও জোর করে তুলেছে এটা ঠিক মিথ্যা প্রত্যাবর্তন। হ্যাকি মনে হয়েছে, তবে এটি আমাদের অ্যাপ্লিকেশনটির জন্য কাজ করেছে।

— মাইকেল

বুটস্ট্র্যাপ ৩.৩.৫ এ কাজ করবে বলে মনে হচ্ছে না। JSFiddle

— bytesized

বুটস্ট্র্যাপ ৩.৩.৫ এর জন্য .btn-default [অক্ষম] {পয়েন্টার-ইভেন্টগুলি যুক্ত করুন: কিছুই নয়; }

— জন লেহম্যান

Answer 3

এটি সিএসএসের মাধ্যমে করা যেতে পারে। "পয়েন্টার-ইভেন্টস" বৈশিষ্ট্যটি হ'ল টুলটিপ প্রদর্শিত হতে বাধা দেয়। বুটস্ট্র্যাপ দ্বারা সেট করা "পয়েন্টার-ইভেন্টস" বৈশিষ্ট্যটিকে ওভাররাইড করে টুলটিপ প্রদর্শন করতে অক্ষম বোতামগুলি পেতে পারেন।

.btn.disabled {
    pointer-events: auto;
}

Comments

কেবলমাত্র একটি পার্শ্ব নোট, এটি কেবল 11 বা ততোধিক ক্ষেত্রে IE এর জন্য কাজ করে। খুব সুন্দর অন্যান্য সমস্ত আধুনিক ব্রাউজারগুলি কিছু সময়ের জন্য এটি সমর্থন করেছে। দেখুন: caniuse.com/#feat=pointer-events

— নীল মনরো

এটি [disabled]বোতামগুলিতে কাজ করছে বলে মনে হচ্ছে না । এছাড়াও বুটস্ট্র্যাপ (২.৩.২) উত্সের যে কোনও জায়গায় পয়েন্টার-ইভেন্টগুলি নির্ধারণ করে দেখবেন না।

— কঙ্গাক্স

@ কংগ্যাক্স আপনি ঠিক বলেছেন, এটি কেবল বিএস 'অক্ষম' শ্রেণীর মাধ্যমে অক্ষম করা বোতামগুলির জন্য কাজ করবে। Balexand এর উত্তর ( stackoverflow.com/a/19938049/1794871 ) যে ক্ষেত্রে সেরা কাজ করবে। যে ইশারা জন্য ধন্যবাদ।

— জিন পার্সেল্লানো

একটি বুটস্ট্রাইপিএন কৌণিক অ্যাপে, এই স্টাইলটি প্রয়োগ করার পরে, অক্ষম বোতামটি এখন ক্লিকযোগ্য

— দিমিত্রি কোপ্রিয়া

আমি এটি বিটিএন ক্লাস সহ একটি অ্যাঙ্কারে ব্যবহার করার চেষ্টা করেছি। এটা তোলে লাগছিল অক্ষম হয় এবং টুলটিপ কাজ, কিন্তু আমি লিঙ্ক (সম্ভব নাও হতে উচিত) ক্লিক করত।

— ওলে হার্স্টেট

Answer 4

আপনি যদি চেকবক্স, পাঠ্যবক্স এবং অন্যান্য জাতীয় সরঞ্জামগুলির জন্য মরিয়া (আমি যেমন ছিলাম), তবে আমার হ্যাকির কাজটি এখানে:

$('input:disabled, button:disabled').after(function (e) {
    d = $("<div>");
    i = $(this);
    d.css({
        height: i.outerHeight(),
        width: i.outerWidth(),
        position: "absolute",
    })
    d.css(i.offset());
    d.attr("title", i.attr("title"));
    d.tooltip();
    return d;
});

কাজের উদাহরণ: http://jsfiddle.net/WB6bM/11/

এর মূল্য কী, তার জন্য আমি বিশ্বাস করি অক্ষম ফর্ম উপাদানগুলির সরঞ্জামদণ্ডগুলি ইউএক্সের পক্ষে খুব গুরুত্বপূর্ণ। যদি আপনি কাউকে কিছু করা থেকে বিরত রাখেন তবে আপনাকে তাদের কেন তা বলা উচিত।

Comments

এটি সঠিক উত্তর হওয়া উচিত। আমার কাছে

— একেবারে হ্যাকি

এমন কোনও কিছুর জন্য দুঃস্বপ্ন যা বেক করা উচিত :(

— শয়তানের অ্যাডভোকেট

এটি ভালভাবে কাজ করে তবে উইন্ডো আকারের উপর ভিত্তি করে যদি আপনার ইনপুট অবস্থানগুলি পরিবর্তন হয় (যেমন আপনার ফর্ম উপাদানগুলি মোড়ানো / সরানো থাকে) আপনার ti (উইন্ডো) এ কিছু হ্যান্ডলিং যুক্ত করতে হবে the টুলটিপটি ডিভের চারপাশে সরানোর জন্য রেসাইজ করতে হবে, বা সেগুলি প্রদর্শিত হবে ভুল জায়গায় : আমি এখান থেকে, CMS এর উত্তর সঙ্গে মিশ্রন সুপারিশ stackoverflow.com/questions/2854407/...

— knighter

Answer 5

এই কাজের ক্ষেত্রগুলি কুরুচিপূর্ণ। আমি সমস্যাটি ডিবাগ করেছি যে বুটস্ট্র্যাপ স্বয়ংক্রিয়ভাবে সিএসএস সম্পত্তি পয়েন্টার-ইভেন্টগুলি সেট করে : কোনওটি নয় অক্ষম উপাদানগুলিতে কিছুই নয়।

এই ম্যাজিক বৈশিষ্ট্যটির কারণে জেএস সিএসএস নির্বাচকের সাথে মেলে এমন উপাদানগুলির কোনও ইভেন্ট পরিচালনা করতে সক্ষম নয় handle

আপনি যদি এই সম্পত্তিটিকে ডিফল্ট হিসাবে ওভাররাইট করেন, তবে টুলটিপস সহ সমস্ত কিছুই কবজির মতো কাজ করে!

.disabled {
  pointer-events: all !important;
}

তবে আপনার এত সাধারণ সিলেক্টর ব্যবহার করা উচিত নয়, কারণ আপনার সম্ভবত জাভাস্ক্রিপ্ট ইভেন্ট প্রচারের উপায় নিজেই বন্ধ করতে হবে ( e.preventDefault () )।

Answer 6

আমার ক্ষেত্রে, উপরের সমাধানগুলির কোনওটিই কার্যকর হয়নি। আমি দেখতে পেয়েছি যে নিখুঁত উপাদানটি ব্যবহার করে অক্ষম বোতামটি ওভারল্যাপ করা আরও সহজ:

<div rel="tooltip" title="I workz" class="wrap">
  <div class="overlap"></div>
  <button>I workz</button>
</div>

<div rel="tooltip" title="Boo!!" class="wrap poptooltip">
  <div class="overlap"></div>
  <button disabled>I workz disabled</button>
</div>

.wrap {
  display: inline-block;
  position: relative;
}

.overlap {
  display: none
}

.poptooltip .overlap {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1000;
}

ডেমো

Answer 7

অক্ষম বোতামটিতে দেখানোর জন্য আপনি সরঞ্জাম-টিপটি পেতে পারেন না। এর কারণ অক্ষম উপাদানগুলি সরঞ্জাম-টিপ সহ কোনও ইভেন্টই ট্রিগার করে না। আপনার সেরা বাজিটি হ'ল বোতামটি অক্ষম করা নকল করা (যাতে এটি এর অক্ষমগুলির মতো দেখায় এবং কাজ করে), যাতে আপনি তারপরে টুল-টিপটি ট্রিগার করতে পারেন।

যেমন। javascript:

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

$('[rel=tooltip].disabled').bind('click', function(){
     return false;
});

ন্যায়বিচারের পরিবর্তে $('[rel=tooltip]').tooltip();​

এইচটিএমএল:

<hr>
<button class="btn disabled" rel="tooltip" data-title="Dieser Link führt zu Google">button disabled</button>

<button class="btn" rel="tooltip" data-title="Dieser Link führt zu Google">button not disabled</button>

জেএসফিডাল: http://jsfiddle.net/BA4zM/75/

Comments

আমি বোতাম অক্ষম সহ একটি সমাধান খুঁজছি।

— লোরেন বার্নার্ড

@ অ্যাডাম উটার আবর্জনা! অবশ্যই আপনি একটি অক্ষম বোতামে একটি সরঞ্জাম টিপ পেতে পারেন!

— সূচনাগুলি

Answer 8

এই উদাহরণটি ব্যবহার করে দেখুন:

সরঞ্জামদণ্ডগুলি অবশ্যই এটি দিয়ে শুরু করতে হবে jQuery: নির্দিষ্ট উপাদানটি নির্বাচন করুন এবং tooltip()পদ্ধতিটিতে কল করুন JavaScript:

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

যুক্ত করুন CSS:

.tool-tip {
  display: inline-block;
}

.tool-tip [disabled] {
  pointer-events: none;
}

এবং আপনার এইচটিএমএল:

<span class="tool-tip" data-toggle="tooltip" data-placement="bottom" title="I am Tooltip">
    <button disabled="disabled">I am disabled</button>
</span>

Answer 9

আপনি কেবল সিএসএস এর মাধ্যমে অক্ষম বোতামগুলির জন্য বুটস্ট্র্যাপের "পয়েন্টার-ইভেন্টগুলি" স্টাইলটিকে ওভাররাইড করতে পারেন

.btn[disabled] {
 pointer-events: all !important;
}

আরও ভাল এখনও স্পষ্ট করা এবং নির্দিষ্ট বোতাম যেমন অক্ষম

#buttonId[disabled] {
 pointer-events: all !important;
}

Comments

কাজ করছে! ধন্যবাদ!

— বেদরান মান্ডিć

আমি @ বেদরানমন্দিćকে সাহায্য করতে পেরে আনন্দিত :)

— বেন স্মিথ

Answer 10

এটিই আমি এবং টেক্রোম্যাঙ্কার নিয়ে এসেছি।

উদাহরণ উপাদান:

<a href="http://www.google.com" id="btn" type="button" class="btn btn-disabled" data-placement="top" data-toggle="tooltip" data-title="I'm a tooltip">Press Me</a>

দ্রষ্টব্য: টুলটিপ বৈশিষ্ট্যগুলি একটি পৃথক ডিভের সাথে যুক্ত করা যেতে পারে, যার মধ্যে .tooltip ('ধ্বংস') কল করার সময় সেই ডিভের আইডি ব্যবহার করতে হবে; বা। টলটিপ ();

এটি টুলটিপ সক্ষম করে, এটি এইচটিএমএল ফাইলের অন্তর্ভুক্ত যে কোনও জাভাস্ক্রিপ্টে রেখে দেয়। তবে এই লাইনটি যুক্ত করার প্রয়োজন হবে না। (যদি টুলটিপটি এই লাইনটিকে ডাব্লু / ও দেখায় তবে এটি অন্তর্ভুক্ত করে বিরক্ত করবেন না)

$("#element_id").tooltip();

টুলটিপ ধ্বংস করে দেয়, ব্যবহারের জন্য নীচে দেখুন।

$("#element_id").tooltip('destroy');

বোতামটি ক্লিকযোগ্য হতে বাধা দেয়। কারণ অক্ষম বৈশিষ্ট্যটি ব্যবহার করা হচ্ছে না, এটি প্রয়োজনীয়, অন্যথায় বোতামটি এটি "অক্ষম" মনে হলেও এটি ক্লিকযোগ্য হবে যদি এটি অক্ষম থাকে।

$("#element_id").click(
  function(evt){
    if ($(this).hasClass("btn-disabled")) {
      evt.preventDefault();
      return false;
    }
  });

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

.btn.btn-disabled{
    cursor: default;
}

জাভাস্ক্রিপ্ট যা সক্রিয় হয়ে উঠছে বোতামটি নিয়ন্ত্রণ করছে তাতে নীচের কোডটি যুক্ত করুন।

$("#element_id").removeClass('btn-disabled');
$("#element_id").addClass('btn-success');
$('#element_id).tooltip('destroy');

টুলটিপটি কেবল তখনই প্রদর্শিত হবে যখন বোতামটি অক্ষম থাকে।

আপনি যদি কৌনিক জাল ব্যবহার করছেন তবে আমার এটির জন্য একটি সমাধানও রয়েছে, যদি ইচ্ছা হয়।

Comments

destroyটুলটিপ ব্যবহার করার সময় আমি কিছু সমস্যা পেয়েছি । (দেখুন এই ) কিন্তু, $("#element_id").tooltip('disable')এবং $("#element_id").tooltip('enable')আমার জন্য হবে।

— সাম কাহ চিইন

Answer 11

এটি যদি কাউকে সহায়তা করে তবে আমি কেবল তার ভিতরে স্প্যান রেখে সেখানে চারপাশে কৌণিক জিনিসগুলি প্রয়োগ করে একটি সরঞ্জামদণ্ড প্রদর্শন করতে একটি অক্ষম বোতাম পেতে সক্ষম হয়েছি ...

<button ng-click="$ctrl.onClickDoThis()"
        ng-disabled="!$ctrl.selectedStuff.length">
  <span tooltip-enable="!$ctrl.selectedStuff.length"
        tooltip-append-to-body="true"
        uib-tooltip="Select at least one thing to enable button.">
    My Butt
  </span>
</button>

Comments

আপনি মেধাবী এ জাতীয় সহজ সমাধান।

— brt

Answer 12

বুটস্ট্র্যাপ 4 এর উপর ভিত্তি করে

অক্ষম উপাদানসমূহ অক্ষম বৈশিষ্ট্যযুক্ত উপাদানগুলি ইন্টারেক্টিভ নয়, যার অর্থ ব্যবহারকারীরা কোনও সরঞ্জামদণ্ড (বা পপওভার) ট্রিগার করতে তাদের ফোকাস করতে, হোভার করতে বা ক্লিক করতে পারে না। কার্যকারণ হিসাবে, আপনি একটি মোড়ক থেকে টুলটিপটি ট্রিগার করতে চান বা ট্যাবিনডেক্স = "0" ব্যবহার করে আদর্শ কীবোর্ড-দৃষ্টি নিবদ্ধ করে তৈরি করতে এবং অক্ষম উপাদানের পয়েন্টার-ইভেন্টগুলিকে ওভাররাইড করতে চান।

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

সমস্ত বিবরণ এখানে: বুটস্ট্র্যাপ 4 ডক

Comments

পোস্টের জন্য ধন্যবাদ, বিশ্বাস করতে পারি যে আমি এই সেটআপটিকে উপেক্ষা করেছি।

— 8:55

Answer 13

বুটস্ট্র্যাপের জন্য কার্যকারী কোড 3.3.6

javascript:

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

$(".btn").click(function(e) {
 if ($(this).hasClass("disabled")){
   e.preventDefault();
 }
});

সিএসএস:

a.btn.disabled, fieldset[disabled] a.btn {
  pointer-events: auto;
}

Answer 14

আপনি CSS3 ব্যবহার করে প্রভাবটি অনুকরণ করতে পারেন।

কেবলমাত্র অক্ষম রাষ্ট্রটিকে বোতামটি বন্ধ করুন এবং সরঞ্জামটিপ আর প্রদর্শিত হবে না .. যাচাইকরণের জন্য এটি দুর্দান্ত কারণ কোডটি কম যুক্তিযুক্ত প্রয়োজন requires

আমি এই কলমটি চিত্রিত করার জন্য লিখেছি।

CSS3 অক্ষমযুক্ত সরঞ্জামদণ্ডগুলি

[disabled] {
  &[disabled-tooltip] {
    cursor:not-allowed;
    position: relative;
    &:hover {
      &:before {
        content:'';
        border:5px solid transparent;
        border-top:5px solid black;
        position: absolute;
        left: 50%;
        transform: translate(-50%, calc(-100% + -5px));
      }
      &:after {
        content: attr(disabled-tooltip);
        position: absolute;
        left: 50%;
        transform: translate(-50%, calc(-100% + -15px));
        width:280px;
        background-color:black;
        color:white;
        border-radius:5px;
        padding:8px 12px;
        white-space:normal;
        line-height:1;
      }
    }
  }
}

---

<button type="button" class="btn btn-primary" disabled-tooltip="I am a disabled tooltip using CSS3.. You can not click this button." disabled>Primary Button</button>

Answer 15

অক্ষম শ্রেণীর পরিবর্তে দৃশ্যমান অক্ষম করার জন্য কেবল অক্ষম শ্রেণীর বাটনে অক্ষম শ্রেণীর সাথে যুক্ত করুন।

<button class="btn disabled" rel="tooltip" data-title="Dieser Link führt zu Google">button disabled</button>

দ্রষ্টব্য: এই বোতামটি কেবল অক্ষম বলে মনে হচ্ছে, তবে এটি এখনও ইভেন্টগুলিকে ট্রিগার করে এবং আপনাকে কেবল এটি সম্পর্কে সচেতন থাকতে হবে।

Answer 16

pointer-events: auto; একটি উপর কাজ করে না <input type="text" /> ।

আমি একটি ভিন্ন পন্থা গ্রহণ। আমি ইনপুট ক্ষেত্রটি অক্ষম করি না, তবে এটি CSS এবং জাভাস্ক্রিপ্টের মাধ্যমে অক্ষম হিসাবে কাজ করি make

ইনপুট ক্ষেত্রটি অক্ষম না থাকায়, টুলটিপটি সঠিকভাবে প্রদর্শিত হয়। ইনপুট ক্ষেত্রটি অক্ষম থাকলে ক্ষেত্রে এটি একটি মোড়ক যুক্ত করার চেয়ে সহজ উপায় ছিল।

$(document).ready(function () {
  $('.disabled[data-toggle="tooltip"]').tooltip();
  $('.disabled').mousedown(function(event){
    event.stopImmediatePropagation();
    return false;
  });
});

input[type=text].disabled{
  cursor: default;
  margin-top: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.3/js/tether.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>


<input type="text" name="my_field" value="100" class="disabled" list="values_z1" data-toggle="tooltip" data-placement="top" title="this is 10*10">

Answer 17

বুটস্ট্র্যাপ 3 এর জন্য

এইচটিএমএল

<button 
    class="btn btn-success" 
    disabled
    data-hint="Enabled">
  <div class="sp-btn-overlap" data-hint="Disabled"></div>
  Submit button
</button>

সিএসএস

button { position:relative; }

.sp-btn-overlap { 
    position:absolute; 
    top:0; 
    left:0; 
    height:100%; 
    width:100%; 
    background:none; 
    border:none; 
    z-index:1900;
}

জাতীয়

$('button .sp-btn-overlap')
    .popover({
        trigger: 'hover',
        container: 'body',
        placement: 'bottom',
        content: function() {
            return $(this).parent().prop('disabled')
                    ? $(this).data('hint')
                    : $(this).parent().data('hint');
            }
        });

$('button .sp-btn-overlap')
  .popover({
    trigger: 'hover',
    container: 'body',
    placement: 'bottom',
    content: function() {
      return $(this).parent().prop('disabled')
                  ? $(this).data('hint')
                  : $(this).parent().data('hint'); }
  });

button {
  position:relative; /* important! */
}

.sp-btn-overlap {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background:none;
  border:none;
  z-index:1900;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<button disabled class="btn btn-default" data-hint="Enabled">
  <div class="sp-btn-overlap" data-hint="Disabled"></div>
  Disabled button
</button>

<button class="btn btn-default" data-hint="Enabled">
  <div class="sp-btn-overlap" data-hint="Disabled"></div>
  Enabled button
</button>

Answer 18

আমি অন্তত সাফারি দিয়ে "পয়েন্টার-ইভেন্টস: স্বয়ংক্রিয়" "অক্ষম" করার আগে এই সমস্যাটি সমাধান করেছি । বিপরীত অর্ডার কাজ করে না।