Bagaimana cara mengaktifkan Bootstrap tooltip pada tombol yang dinonaktifkan?

Saya perlu menampilkan tooltip pada tombol yang dinonaktifkan dan menghapusnya pada tombol yang diaktifkan. Saat ini, ia bekerja secara terbalik.

Apa cara terbaik untuk membalikkan perilaku ini?

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

Ini demo

PS: Saya ingin menjaga disabledatribut.

Berikut ini beberapa kode yang berfungsi: 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");
    }
});

Idenya adalah untuk menambahkan tooltip ke elemen induk dengan selectoropsi, dan kemudian menambahkan / menghapus relatribut saat mengaktifkan / menonaktifkan tombol.

Anda dapat membungkus tombol yang dinonaktifkan dan meletakkan tooltip pada bungkusnya:

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

Jika pembungkusnya memiliki display:inlinetooltip tampaknya tidak berfungsi. Menggunakan display:blockdandisplay:inline-block tampaknya berfungsi dengan baik. Tampaknya juga berfungsi baik dengan pembungkus apung.

PEMBARUAN Berikut ini JSFiddle yang diperbarui yang berfungsi dengan Bootstrap terbaru (3.3.6). Terima kasih kepada @JohnLehmann untuk sarannyapointer-events: none; untuk tombol yang dinonaktifkan.

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

Ini dapat dilakukan melalui CSS. Properti "pointer-events" adalah yang mencegah tooltip muncul. Anda bisa menonaktifkan tombol untuk menampilkan tooltip dengan mengganti properti "pointer-events" yang diatur oleh bootstrap.

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

Jika Anda putus asa (seperti saya sebelumnya) untuk tooltips pada kotak centang, kotak teks dan sejenisnya, maka di sini adalah solusi hackey saya:

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

Contoh kerja: http://jsfiddle.net/WB6bM/11/

Untuk apa nilainya, saya percaya tooltips pada elemen formulir yang dinonaktifkan sangat penting bagi UX. Jika Anda mencegah seseorang melakukan sesuatu, Anda harus memberi tahu mereka alasannya.

Penanganan ini buruk. Saya telah memperdebatkan masalahnya adalah bahwa bootstrap secara otomatis mengatur pointer- properti properti CSS : tidak ada pada elemen yang dinonaktifkan.

Properti ajaib ini menyebabkan JS tidak dapat menangani peristiwa apa pun pada elemen yang cocok dengan pemilih CSS.

Jika Anda menimpa properti ini ke default, semuanya berfungsi seperti pesona, termasuk tooltips!

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

Namun Anda tidak boleh menggunakan pemilih umum, karena Anda mungkin harus menghentikan cara propagasi acara JavaScript secara manual yang Anda ketahui ( e.preventDefault () ).

Dalam kasus saya, tidak ada solusi di atas yang berfungsi. Saya menemukan bahwa lebih mudah untuk tumpang tindih tombol yang dinonaktifkan menggunakan elemen absolut sebagai:

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

Demo

Coba contoh ini:

Tooltips harus diinisialisasi dengan jQuery: pilih elemen yang ditentukan dan memanggil tooltip()metode di JavaScript:

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

Tambahkan CSS:

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

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

Dan html Anda:

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

Anda tidak bisa mendapatkan tip alat untuk ditampilkan pada tombol yang dinonaktifkan. Ini karena elemen yang dinonaktifkan tidak memicu peristiwa apa pun, termasuk tip alat. Taruhan terbaik Anda adalah memalsukan tombol yang dinonaktifkan (sehingga terlihat dan bertindak seperti dinonaktifkan), sehingga Anda dapat memicu tip alat.

Misalnya. Javascript:

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

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

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

Anda cukup mengesampingkan gaya "pointer-events" Bootstrap untuk tombol yang dinonaktifkan melalui mis. CSS

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

Lebih baik tetap eksplisit dan menonaktifkan tombol tertentu misalnya

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

Inilah yang saya dan tekromancr datang dengan.

Elemen contoh:

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

catatan: atribut tooltip dapat ditambahkan ke div terpisah, di mana id div itu akan digunakan saat memanggil .tooltip ('menghancurkan'); atau .tooltip ();

ini memungkinkan tooltip, letakkan di javascript apa pun yang termasuk dalam file html. baris ini mungkin tidak perlu ditambahkan, namun. (jika tooltip menunjukkan tanpa baris ini maka jangan repot-repot memasukkannya)

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

hancurkan tooltip, lihat di bawah untuk penggunaan.

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

mencegah tombol agar tidak dapat diklik. karena atribut yang dinonaktifkan tidak sedang digunakan, ini perlu, jika tidak tombolnya tetap dapat diklik meskipun "terlihat" seolah-olah dinonaktifkan.

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

Menggunakan bootstrap, kelas btn dan btn-nonaktif tersedia untuk Anda. Ganti ini dalam file .css Anda sendiri. Anda dapat menambahkan warna apa pun atau apa pun yang Anda inginkan seperti tombol ketika dinonaktifkan. Pastikan Anda menjaga kursor: default; Anda juga dapat mengubah seperti apa .btn.btn-success.

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

tambahkan kode di bawah ini ke javascript apa pun yang mengendalikan tombol yang diaktifkan.

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

tooltip sekarang hanya akan ditampilkan ketika tombol dinonaktifkan.

jika Anda menggunakan angularjs saya juga punya solusi untuk itu, jika diinginkan.

Jika itu membantu siapa pun, saya bisa mendapatkan tombol yang dinonaktifkan untuk menunjukkan tooltip hanya dengan meletakkan rentang di dalamnya dan menerapkan hal-hal tooltip di sana, sudut di sekitarnya ...

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

Berdasarkan Bootstrap 4

Elemen yang dinonaktifkan Elemen dengan atribut yang dinonaktifkan tidak interaktif, artinya pengguna tidak dapat fokus, mengarahkan, atau mengkliknya untuk memicu tooltip (atau popover). Sebagai solusinya, Anda akan ingin memicu tooltip dari pembungkus atau, idealnya membuat keyboard-fokus menggunakan tabindex = "0", dan menimpa peristiwa pointer pada elemen yang dinonaktifkan.

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

Semua detail di sini: Bootstrap 4 doc

Kode kerja untuk 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;
}

Anda dapat meniru efek menggunakan CSS3.

Cukup lepaskan status yang dinonaktifkan dari tombol dan tooltip tidak muncul lagi .. ini bagus untuk validasi karena kode ini membutuhkan lebih sedikit logika.

Saya menulis pena ini sebagai ilustrasi.

CSS3 Disable Tooltips

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

Cukup tambahkan kelas yang dinonaktifkan ke tombol alih-alih atribut yang dinonaktifkan untuk membuatnya tampak dinonaktifkan.

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

Catatan: tombol ini hanya tampaknya dinonaktifkan, tetapi masih memicu peristiwa, dan Anda hanya perlu memperhatikan hal itu.

pointer-events: auto;tidak bekerja pada sebuah <input type="text" />.

Saya mengambil pendekatan yang berbeda. Saya tidak menonaktifkan kolom input, tetapi membuatnya berfungsi sebagai dinonaktifkan melalui css dan javascript.

Karena bidang input tidak dinonaktifkan, tooltip ditampilkan dengan benar. Itu dalam kasus saya cara yang lebih sederhana daripada menambahkan pembungkus kalau-kalau bidang input dinonaktifkan.

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

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

Saya akhirnya memecahkan masalah ini, setidaknya dengan Safari, dengan meletakkan "pointer-events: auto" sebelum "dinonaktifkan". Urutan terbalik tidak berhasil.