अक्षम बटन पर बूटस्ट्रैप टूलटिप कैसे सक्षम करें?

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

बटन को निष्क्रिय करने की आवश्यकता है ...

— KoU_warch

@EH_warch मैं बटन को निष्क्रिय रखना चाहता हूं, लेकिन साथ ही क्लिक इवेंट पर टूलटिप भी प्रदर्शित करता हूं।

— लोरेन बर्नार्ड

यह ओपी की मदद नहीं करेगा, लेकिन भविष्य के आगंतुकों को यह जानकर सराहना हो सकती है कि 'आसानी से' विशेषता समान है (हालांकि समान नहीं है) और माउसओवर जैसी उपयोगकर्ता की घटनाओं को अवरुद्ध नहीं करता है।

— चक

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

यह स्वीकृत उत्तर है क्योंकि यह 2012 में काम किया था, जब इसका उत्तर दिया गया था। तब से चीजें बदल गई हैं, मुख्यतः बाहरी संसाधनों का उपयोग फ़िडल में किया गया है। मैंने बूटस्ट्रैप सीडीएन में नए URL जोड़े, कोड अभी भी वही है।

— मिहाई

क्या मुझे बूटस्ट्रैप संस्करण 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ठीक काम करने लगते हैं। यह एक फ्लोटेड आवरण के साथ ठीक काम करता है।

अद्यतन यहाँ एक अद्यतन JSFiddle है जो नवीनतम बूटस्ट्रैप (3.3.6) के साथ काम करता है। pointer-events: none;विकलांग बटन के लिए सुझाव देने के लिए @JohnLehmann को धन्यवाद ।

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

Comments

यह डॉक्स सुझाव देता है और यदि आप यहां सुझाए गए इनलाइन-ब्लॉक ट्रिक का उपयोग करते हैं तो यह काम करता है!

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

हालाँकि, यदि आपका बटन एक बटन समूह का हिस्सा है, तो बटन को लपेटना आपके सौंदर्यशास्त्र को तोड़ देता है :( वैसे भी इस मुद्दे को दूर करने के लिए btn-group?

— Cody

कोडी, बीटीएन-समूहों के लिए, मैंने पाया कि आप उन्हें लपेट नहीं सकते हैं, या वे सही तरीके से प्रदान नहीं करेंगे। मैंने पॉइंटर-ईवेंट को 'ऑटो' पर सेट किया (बस इसके साथ लक्षित किया गया: "div.btn-group> .btn.disabled {पॉइंटर-ईवेंट: ऑटो;}" सिर्फ मामले में), और बटन के ऑनक्लिक ईवेंट को भी झुका दिया। यह सिर्फ झूठ है। हैक किया, लेकिन यह हमारे app के लिए काम किया।

— माइकल

यह बूटस्ट्रैप 3.3.5 में काम नहीं करता है। JSFiddle

— bytesized

बूटस्ट्रैप के लिए 3.3.5 भी .btn-default [विकलांग] {पॉइंटर-इवेंट: कोई नहीं; }

— जॉन लेहमैन

Answer 3

यह सीएसएस के माध्यम से किया जा सकता है। "पॉइंटर-ईवेंट" संपत्ति वह है जो टूलटिप को प्रदर्शित होने से रोक रही है। आप बूटस्ट्रैप द्वारा निर्धारित "पॉइंटर-ईवेंट" संपत्ति को ओवरराइड करके टूलटिप प्रदर्शित करने के लिए अक्षम बटन प्राप्त कर सकते हैं।

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

Comments

बस एक साइड नोट, यह केवल IE में 11 या उच्चतर के लिए काम करता है। बहुत ज्यादा अन्य सभी आधुनिक ब्राउज़रों ने कुछ समय के लिए इसका समर्थन किया है। देखें: caniuse.com/#feat=pointer-events

— नील मुनरो

यह [disabled]बटन पर काम नहीं करता है । इसके अलावा बूटस्ट्रैप (2.3.2) को स्रोत में कहीं भी सूचक-घटनाओं को निर्दिष्ट करते हुए नहीं देखें।

— kangax

@कांगैक्स आप सही कह रहे हैं, यह केवल 'विकलांग' वर्ग के माध्यम से अक्षम बटन के लिए काम करेगा। Balexand का उत्तर ( stackoverflow.com/a/19938049/1794871 ) उस मामले में सबसे अच्छा काम करेगा। यह बात बताने के लिए धन्यवाद।

— जीन पार्सलानो

बूटस्ट्रॉव एंगुलर ऐप में, इस शैली को लागू करने के बाद, अक्षम बटन अब क्लिक करने योग्य है

— दिमित्री कोपरिवा

मैंने इसे btn क्लास वाले एंकर पर इस्तेमाल करने की कोशिश की। यह अक्षम लग रहा था और टूलटिप ने काम किया, लेकिन मैं लिंक पर क्लिक कर सकता था (संभव नहीं होना चाहिए)।

— ओलले हर्स्टेड्ट

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/

इसके लायक क्या है, मेरा मानना ​​है कि अक्षम प्रपत्र तत्वों पर टूलटिप्स UX के लिए बहुत महत्वपूर्ण है। यदि आप किसी को कुछ करने से रोक रहे हैं, तो आपको उन्हें यह बताना चाहिए कि क्यों।

Comments

यह सही उत्तर होना चाहिए। मेरे लिए बिल्कुल भी

— हैकेय

कुछ के लिए एक बुरा सपना क्या है: में देखा जाना चाहिए :(

— शैतान अधिवक्ता

यह अच्छी तरह से काम करता है, लेकिन अगर आपके इनपुट की स्थिति खिड़की के आकार के आधार पर बदल जाती है (जैसे कि यदि आपके फॉर्म के तत्व रैप / मूव करते हैं) तो आपको $ (विंडो) पर कुछ हैंडलिंग जोड़ने की आवश्यकता होगी। टूलटिप डिव को स्थानांतरित करने के लिए .resize, या वे दिखाई देंगे। गलत जगह पर। मैं यहाँ से CMS के उत्तर के साथ संयोजन करने की सलाह देता हूँ: stackoverflow.com/questions/2854407/…

— knighter

Answer 5

ये वर्कअराउंड बदसूरत हैं। मैंने डिबग किया है कि समस्या बूटस्ट्रैप स्वचालित रूप से CSS संपत्ति सूचक-घटनाओं को सेट करती है: अक्षम तत्वों पर कोई नहीं ।

यह जादू की संपत्ति का कारण है कि JS CSS चयनकर्ता से मेल खाने वाले तत्वों की किसी भी घटना को संभालने में सक्षम नहीं है।

यदि आप इस संपत्ति को एक डिफ़ॉल्ट करने के लिए अधिलेखित करते हैं, तो सब कुछ टूलटिप्स सहित एक आकर्षण की तरह काम करता है!

.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

आपको अक्षम बटन पर दिखाने के लिए टूल-टिप नहीं मिल सकती है। ऐसा इसलिए है क्योंकि अक्षम तत्व टूल-टिप सहित किसी भी ईवेंट को ट्रिगर नहीं करते हैं। आपकी सबसे अच्छी शर्त यह होगी कि बटन अक्षम किया जा रहा है (ताकि यह दिखता है और इसके विकलांग की तरह काम करता है), इसलिए आप टूल-टिप को ट्रिगर कर सकते हैं।

उदाहरण के लिए। जावास्क्रिप्ट:

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

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

इसके बजाय बस $('[rel=tooltip]').tooltip();​

HTML:

<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>

JSFiddle: 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;
}

और आपका html:

<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

काम किया! धन्यवाद!

— वेदरान मांडिक

खुशी है कि मैं @ VedranMandić :)

— बेन स्मिथ

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>

नोट: टूलटिप विशेषताओं को एक अलग div में जोड़ा जा सकता है, जिसमें कॉल करते समय उस div का उपयोग किया जाना है ।ttttip ('नष्ट'); या .tooltip ();

यह टूलटिप को सक्षम करता है, इसे html फ़ाइल में शामिल किसी भी जावास्क्रिप्ट में डालें। हालाँकि, इस पंक्ति को जोड़ना आवश्यक नहीं है। (यदि टूलटिप इस लाइन को w / o दिखाता है तो इसे शामिल न करें)

$("#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');

टूलटिप को अब केवल तब दिखाना चाहिए जब बटन अक्षम हो।

अगर आप angularjs का उपयोग कर रहे हैं, तो मेरे पास इसका एक समाधान है, यदि वांछित है।

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

पोस्ट के लिए धन्यवाद, विश्वास कर सकता हूं कि मैंने इस सेटअप की अनदेखी की है।

— एड

Answer 13

बूटस्ट्रैप 3.3.6 के लिए कार्य कोड

जावास्क्रिप्ट:

$('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 का उपयोग करके प्रभाव का अनुकरण कर सकते हैं।

बस बटन से अक्षम स्थिति ले लो और टूलटिप अब दिखाई नहीं देता है .. यह सत्यापन के लिए बहुत अच्छा है क्योंकि कोड को कम तर्क की आवश्यकता होती है।

मैंने इस कलम को चित्रित करने के लिए लिखा था।

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 और जावास्क्रिप्ट के माध्यम से अक्षम कर देता है।

इनपुट फ़ील्ड अक्षम नहीं होने के कारण, टूलटिप ठीक से प्रदर्शित होता है। इनपुट क्षेत्र अक्षम होने की स्थिति में रैपर को जोड़ने की तुलना में यह मेरे मामले में सरल था।

$(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

मैंने आखिरकार "पॉइंटर-इवेंट्स: ऑटो" को "डिसेबल" करने से पहले , कम से कम सफारी के साथ, इस समस्या को हल किया । रिवर्स ऑर्डर काम नहीं किया।