Làm cách nào để bật công cụ Bootstrap trên nút bị vô hiệu hóa?

Tôi cần hiển thị một chú giải công cụ trên một nút bị vô hiệu hóa và loại bỏ nó trên một nút được kích hoạt. Hiện tại, nó hoạt động ngược lại.

Cách tốt nhất để đảo ngược hành vi này là gì?

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

Đây là một bản demo

PS: Tôi muốn giữ disabledthuộc tính.

Đây là một số mã làm việc: 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");
    }
});

Ý tưởng là thêm tooltip vào một phần tử cha với selectortùy chọn, sau đó thêm / xóa relthuộc tính khi bật / tắt nút.

Bạn có thể quấn nút bị vô hiệu hóa và đặt tooltip vào trình bao bọc:

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

Nếu trình bao bọc có display:inlinethì tooltip dường như không hoạt động. Sử dụng display:blockvà display:inline-blockdường như hoạt động tốt. Nó cũng xuất hiện để hoạt động tốt với một trình bao bọc nổi.

CẬP NHẬT Đây là một JSFiddle được cập nhật hoạt động với Bootstrap mới nhất (3.3.6). Cảm ơn @JohnLehmann đã gợi ý pointer-events: none;cho nút bị vô hiệu hóa.

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

Điều này có thể được thực hiện thông qua CSS. Thuộc tính "con trỏ sự kiện" là thứ ngăn không cho chú giải công cụ xuất hiện. Bạn có thể nhận được các nút bị vô hiệu hóa để hiển thị chú giải công cụ bằng cách ghi đè thuộc tính "sự kiện con trỏ" được đặt bởi bootstrap.

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

Nếu bạn đang tuyệt vọng (như tôi) cho các chú giải công cụ trên các hộp kiểm, hộp văn bản và những thứ tương tự, thì đây là cách giải quyết hackey của tôi:

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

Ví dụ hoạt động: http://jsfiddle.net/WB6bM/11/

Đối với giá trị của nó, tôi tin rằng các chú giải công cụ về các yếu tố hình thức bị vô hiệu hóa là rất quan trọng đối với UX. Nếu bạn đang ngăn ai đó làm gì đó, bạn nên nói với họ tại sao.

Những cách giải quyết này là xấu xí. Tôi đã khắc phục vấn đề là bootstrap tự động đặt các sự kiện con trỏ thuộc tính CSS : không có phần tử bị vô hiệu hóa.

Thuộc tính ma thuật này khiến cho JS không thể xử lý bất kỳ sự kiện nào trên các phần tử phù hợp với bộ chọn CSS.

Nếu bạn ghi đè thuộc tính này thành mặc định, mọi thứ sẽ hoạt động như một nét quyến rũ, bao gồm cả chú giải công cụ!

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

Tuy nhiên, bạn không nên sử dụng bộ chọn chung như vậy, vì có thể bạn sẽ phải dừng thủ công lan truyền sự kiện JavaScript theo cách bạn biết ( e.preventDefault () ).

Trong trường hợp của tôi, không có giải pháp nào ở trên hoạt động. Tôi thấy rằng việc chồng lên nút bị vô hiệu hóa dễ dàng hơn bằng cách sử dụng một yếu tố tuyệt đối như:

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

Bản giới thiệu

Bạn không thể có mẹo công cụ để hiển thị trên nút bị tắt. Điều này là do các phần tử bị vô hiệu hóa không kích hoạt bất kỳ sự kiện nào, kể cả mẹo công cụ. Đặt cược tốt nhất của bạn sẽ là giả mạo nút bị vô hiệu hóa (để nó trông và hoạt động giống như nút bị vô hiệu hóa), do đó bạn có thể kích hoạt mẹo công cụ.

Ví dụ. Javascript:

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

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

Thay vì chỉ $('[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>

Mã thông báo: http://jsfiddle.net/BA4zM/75/

Hãy thử ví dụ này:

Chú giải công cụ phải được khởi tạo với jQuery: chọn phần tử đã chỉ định và gọi tooltip()phương thức trong JavaScript:

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

Thêm CSS:

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

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

Và html của bạn:

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

Bạn chỉ có thể ghi đè kiểu "sự kiện con trỏ" của Bootstrap cho các nút bị vô hiệu hóa thông qua CSS, vd

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

Tốt hơn vẫn là rõ ràng và vô hiệu hóa các nút cụ thể, ví dụ

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

Đây là những gì bản thân tôi và tekromancr nghĩ ra.

Phần tử ví dụ:

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

lưu ý: các thuộc tính tooltip có thể được thêm vào một div riêng biệt, trong đó id của div đó sẽ được sử dụng khi gọi .tooltip ('hủy'); hoặc .tooltip ();

điều này cho phép tooltip, đặt nó vào bất kỳ javascript nào có trong tệp html. dòng này có thể không cần thiết để thêm, tuy nhiên. (nếu chú giải công cụ hiển thị dòng này thì đừng bận tâm đến nó)

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

phá hủy tooltip, xem bên dưới để sử dụng.

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

ngăn chặn nút có thể được nhấp. bởi vì thuộc tính bị vô hiệu hóa không được sử dụng, điều này là cần thiết, nếu không, nút vẫn có thể nhấp được mặc dù nó "trông" như thể nó bị vô hiệu hóa.

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

Sử dụng bootstrap, các lớp btn và btn bị vô hiệu hóa có sẵn cho bạn. Ghi đè những thứ này trong tệp .css của riêng bạn. bạn có thể thêm bất kỳ màu nào hoặc bất cứ thứ gì bạn muốn nút trông giống như khi bị vô hiệu hóa. Hãy chắc chắn rằng bạn giữ con trỏ: mặc định; bạn cũng có thể thay đổi .btn.btn-thành công trông như thế nào.

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

thêm mã dưới đây vào bất cứ điều gì javascript đang kiểm soát nút được kích hoạt.

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

tooltip bây giờ chỉ hiển thị khi nút bị tắt.

Nếu bạn đang sử dụng angularjs tôi cũng có một giải pháp cho điều đó, nếu muốn.

Nếu nó giúp được bất cứ ai, tôi đã có thể có một nút bị vô hiệu hóa để hiển thị một chú giải công cụ bằng cách chỉ cần đặt một khoảng bên trong nó và áp dụng công cụ chú giải ở đó, angularjs xung quanh nó ...

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

Dựa trên Bootstrap 4

Các phần tử bị vô hiệu Các phần tử với thuộc tính bị vô hiệu hóa không tương tác, có nghĩa là người dùng không thể tập trung, di chuột hoặc nhấp vào chúng để kích hoạt một chú giải công cụ (hoặc popover). Như một giải pháp thay thế, bạn sẽ muốn kích hoạt chú giải công cụ từ trình bao bọc hoặc, có thể tập trung vào bàn phím một cách lý tưởng bằng cách sử dụng tabindex = "0" và ghi đè các sự kiện con trỏ trên phần tử bị vô hiệu hóa.

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

Tất cả các chi tiết ở đây: Bootstrap 4 doc

Mã làm việc cho 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;
}

Bạn có thể bắt chước hiệu ứng bằng CSS3.

Chỉ cần tắt trạng thái bị tắt khỏi nút và chú giải công cụ sẽ không xuất hiện nữa .. điều này rất tốt cho việc xác thực vì mã yêu cầu ít logic hơn.

Tôi đã viết cây bút này để minh họa.

Chú giải công cụ CSS3 bị vô hiệu hóa

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

Đơn giản chỉ cần thêm lớp bị vô hiệu hóa vào nút thay vì thuộc tính bị vô hiệu hóa để làm cho nó bị vô hiệu hóa thay thế.

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

Lưu ý: nút này chỉ bị vô hiệu hóa, nhưng nó vẫn kích hoạt các sự kiện và bạn chỉ cần chú ý đến điều đó.

pointer-events: auto; không hoạt động trên một <input type="text" /> .

Tôi đã thực hiện một cách tiếp cận khác. Tôi không vô hiệu hóa trường đầu vào, nhưng làm cho nó hoạt động như bị vô hiệu hóa thông qua css và javascript.

Vì trường đầu vào không bị tắt, chú giải công cụ được hiển thị đúng. Trong trường hợp của tôi, cách đơn giản hơn là thêm trình bao bọc trong trường hợp trường nhập bị tắt.

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

Dành cho 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;
}

Mã não

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

Cuối cùng tôi đã giải quyết vấn đề này, ít nhất là với Safari, bằng cách đặt "sự kiện con trỏ: tự động" trước khi "vô hiệu hóa". Lệnh đảo ngược không hoạt động.