วิธีเปิดใช้งานเคล็ดลับเครื่องมือ Bootstrap บนปุ่มที่ถูกปิดใช้งาน?

ฉันต้องแสดงคำแนะนำเครื่องมือบนปุ่มปิดใช้งานและลบออกจากปุ่มที่เปิดใช้งาน ปัจจุบันมันทำงานในสิ่งที่ตรงกันข้าม

วิธีที่ดีที่สุดในการคว่ำพฤติกรรมนี้คืออะไร

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

นี่คือตัวอย่าง

PS: ฉันต้องการเก็บdisabledแอตทริบิวต์

นี่คือรหัสการทำงานบางส่วน: 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ททริบิวเมื่อเปิด / ปิดการใช้งานปุ่ม

คุณสามารถตัดปุ่มที่ปิดใช้งานและวางคำแนะนำเครื่องมือบนกระดาษห่อ:

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

หาก wrapper มีdisplay:inlineคำแนะนำเครื่องมือก็ไม่ทำงาน การใช้display:blockและdisplay:inline-blockดูเหมือนว่าจะทำงานได้ดี นอกจากนี้ยังดูเหมือนว่าจะทำงานได้ดีกับเสื้อคลุมลอย

UPDATE นี่คือ JSFiddle ที่อัปเดตซึ่งทำงานกับ Bootstrap ล่าสุด (3.3.6) ขอบคุณ @JohnLehmann สำหรับการแนะนำpointer-events: none;ปุ่มที่ถูกปิดใช้งาน

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

สามารถทำได้ผ่าน CSS คุณสมบัติ "ตัวชี้เหตุการณ์" คือสิ่งที่ป้องกันไม่ให้คำแนะนำเครื่องมือปรากฏ คุณสามารถรับปุ่มที่ถูกปิดใช้งานเพื่อแสดงคำแนะนำเครื่องมือโดยแทนที่คุณสมบัติ "ตัวชี้เหตุการณ์" ที่กำหนดโดย bootstrap

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

หากคุณหมดหวัง (อย่างที่ฉันเป็น) สำหรับคำแนะนำเครื่องมือในช่องทำเครื่องหมายกล่องข้อความและสิ่งที่คล้ายกันนี่คือวิธีแก้ปัญหาแฮกเกอร์ของฉัน:

$('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 หากคุณป้องกันไม่ให้ใครบางคนทำอะไรคุณควรบอกพวกเขาว่าทำไม

วิธีแก้ปัญหาเหล่านี้น่าเกลียด ฉัน debugged ปัญหาคือ bootstrap ที่ตั้ง CSS พอยน์เตอร์คุณสมบัติเหตุการณ์: ไม่มีในองค์ประกอบที่ถูกปิดใช้งาน

คุณสมบัติมหัศจรรย์นี้ทำให้ JS ไม่สามารถจัดการเหตุการณ์ใด ๆ ในองค์ประกอบที่ตรงกับตัวเลือก CSS

หากคุณเขียนทับคุณสมบัตินี้เป็นค่าเริ่มต้นทุกอย่างทำงานได้อย่างมีเสน่ห์รวมถึงเคล็ดลับเครื่องมือ!

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

อย่างไรก็ตามคุณไม่ควรใช้ตัวเลือกทั่วไปเนื่องจากคุณอาจต้องหยุดการเผยแพร่เหตุการณ์ JavaScript ด้วยตนเองตามที่คุณรู้ ( e.preventDefault () )

ในกรณีของฉันไม่มีวิธีการแก้ปัญหาข้างต้นทำงาน ฉันพบว่ามันง่ายกว่าที่จะซ้อนทับปุ่มที่ถูกปิดใช้งานโดยใช้องค์ประกอบแบบสัมบูรณ์เป็น:

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

การสาธิต

คุณไม่สามารถรับเคล็ดลับเครื่องมือเพื่อแสดงบนปุ่มปิดการใช้งาน เนื่องจากองค์ประกอบที่ปิดใช้งานจะไม่เรียกใช้เหตุการณ์ใด ๆ รวมถึงเคล็ดลับเครื่องมือ ทางออกที่ดีที่สุดของคุณคือการปลอมปุ่มถูกปิดใช้งาน (เพื่อให้ดูเหมือนและทำหน้าที่เหมือนถูกปิดใช้งาน) ดังนั้นคุณจึงสามารถเรียกใช้เคล็ดลับเครื่องมือ

เช่น. javascript:

$('[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/

ลองตัวอย่างนี้:

เคล็ดลับเครื่องมือจะต้องเริ่มต้นด้วย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>

คุณสามารถแทนที่สไตล์ "ตัวชี้เหตุการณ์" ของ Bootstrap สำหรับปุ่มที่ปิดใช้งานผ่าน CSS เช่น

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

ดีกว่ายังคงชัดเจนและปิดการใช้งานปุ่มเฉพาะเช่น

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

นี่คือสิ่งที่ตัวฉันเองและ tekromancr เกิดขึ้น

องค์ประกอบตัวอย่าง:

<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 แยกต่างหากซึ่ง id ของ div นั้นจะถูกใช้เมื่อเรียก. ทูลทิป ('ทำลาย'); or .tooltip ();

สิ่งนี้เปิดใช้งานคำแนะนำเครื่องมือวางไว้ในจาวาสคริปต์ที่รวมอยู่ในไฟล์ html อย่างไรก็ตามอาจไม่จำเป็นต้องเพิ่มบรรทัดนี้ (หากคำแนะนำเครื่องมือแสดงโดยไม่มีบรรทัดนี้ก็ไม่ต้องกังวลเช่นกัน)

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

ทำลายคำแนะนำเครื่องมือดูด้านล่างสำหรับการใช้งาน

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

ป้องกันไม่ให้คลิกปุ่มได้ เนื่องจากไม่ได้ใช้คุณลักษณะที่ปิดใช้งานจำเป็นต้องมีสิ่งนี้มิฉะนั้นปุ่มจะยังสามารถคลิกได้แม้ว่าจะเป็น "ดู" ราวกับว่ามันถูกปิดการใช้งาน

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

เมื่อใช้ bootstrap คลาส btn และ btn-disabled จะพร้อมใช้งานสำหรับคุณ แทนที่สิ่งเหล่านี้ในไฟล์. css ของคุณเอง คุณสามารถเพิ่มสีใด ๆ หรือสิ่งที่คุณต้องการให้ปุ่มดูเหมือนเมื่อปิดการใช้งาน ให้แน่ใจว่าคุณเก็บเคอร์เซอร์: เริ่มต้น; นอกจากนี้คุณยังสามารถเปลี่ยนรูปแบบ. btn.btn-success

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

เพิ่มรหัสด้านล่างให้กับสิ่งที่จาวาสคริปต์ควบคุมปุ่มเปิดใช้งาน

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

เคล็ดลับเครื่องมือควรแสดงเฉพาะเมื่อปุ่มถูกปิดใช้งาน

หากคุณกำลังใช้ angularjs ฉันยังมีทางออกสำหรับสิ่งนั้นหากต้องการ

ถ้ามันช่วยทุกคนฉันสามารถกดปุ่มปิดการใช้งานเพื่อแสดงคำแนะนำเครื่องมือโดยเพียงใส่ช่วงไว้ข้างในและใช้สิ่งแนะนำเครื่องมือที่นั่น angularjs อยู่รอบ ๆ ...

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

ขึ้นอยู่กับBootstrap 4

องค์ประกอบที่ปิดใช้งานองค์ประกอบที่มีแอตทริบิวต์ที่ปิดใช้งานไม่ได้เป็นแบบโต้ตอบหมายความว่าผู้ใช้ไม่สามารถโฟกัสเลื่อนหรือคลิกที่องค์ประกอบเหล่านั้นเพื่อเรียกใช้คำแนะนำเครื่องมือ (หรือป๊อปโอเวอร์) ในการแก้ปัญหาคุณจะต้องเรียกใช้คำแนะนำเครื่องมือจาก wrapper หรือทำให้แป้นพิมพ์สามารถโฟกัสได้โดยใช้ tabindex = "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>

รายละเอียดทั้งหมดที่นี่: Bootstrap 4 doc

รหัสการทำงานสำหรับ Bootstrap 3.3.6

javascript:

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

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

CSS:

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

คุณสามารถเลียนแบบเอฟเฟกต์โดยใช้ 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>

เพียงเพิ่มคลาสที่ปิดใช้งานไปที่ปุ่มแทนแอททริบิวต์ที่ปิดใช้งานเพื่อให้ปิดการใช้งานอย่างเห็นได้ชัดแทน

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

หมายเหตุ:ปุ่มนี้ดูเหมือนว่าจะปิดการใช้งาน แต่ยังคงเป็นต้นเหตุของเหตุการณ์และคุณจะต้องคำนึงถึงสิ่งนั้น

pointer-events: auto;<input type="text" />ไม่ได้ทำงานใน

ฉันใช้แนวทางที่แตกต่าง ฉันไม่ได้ปิดการใช้งานช่องใส่ แต่ทำให้มันทำหน้าที่ปิดการใช้งานผ่านทาง CSS และจาวาสคริปต์

เนื่องจากฟิลด์อินพุตไม่ถูกปิดใช้งานคำแนะนำเครื่องมือจึงแสดงอย่างถูกต้อง ในกรณีของฉันมันง่ายกว่าการเพิ่ม wrapper ในกรณีที่ฟิลด์อินพุตถูกปิดใช้งาน

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

สำหรับ Bootstrap 3

HTML

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

CSS

button { position:relative; }

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

JS

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

ในที่สุดฉันก็แก้ปัญหานี้อย่างน้อยก็กับ Safari โดยใส่ "ตัวชี้เหตุการณ์: อัตโนมัติ" ก่อน "ปิดการใช้งาน" ลำดับย้อนกลับไม่ทำงาน