Devre dışı bırakılmış düğmesinde Bootstrap araç ipucu nasıl etkinleştirilir?

Devre dışı bırakılmış bir düğmede araç ipucu görüntülemem ve etkinleştirilmiş bir düğmeden kaldırmam gerekiyor. Şu anda, tersine çalışıyor.

Bu davranışı tersine çevirmenin en iyi yolu nedir?

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

İşte bir demo

Not: disabledÖzelliği korumak istiyorum .

İşte bazı çalışma kodu: 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");
    }
});

Fikir, araç ipucunu selectorseçeneği ile bir üst öğeye eklemek ve ardından reldüğmeyi etkinleştirirken / devre dışı bırakırken özniteliği eklemek / kaldırmaktır .

Devre dışı bırakılan düğmeyi sarabilir ve ipucunu sarmalayıcıya koyabilirsiniz:

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

Sarıcı varsa, display:inlinearaç ipucu çalışmıyor gibi görünüyor. Kullanıyor display:blockve display:inline-blockiyi çalışıyor gibi görünüyor. Ayrıca yüzer bir sargı ile iyi çalışıyor gibi görünüyor.

GÜNCELLEME İşte en son Bootstrap (3.3.6) ile çalışan güncellenmiş bir JSFiddle. pointer-events: none;Devre dışı bırakılan düğmeyi önerdiği için @JohnLehmann'a teşekkürler .

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

Bu CSS ile yapılabilir. "İşaretçi olayları" özelliği, araç ipucunun görünmesini engelleyen özelliktir. Bootstrap tarafından ayarlanan "pointer-events" özelliğini geçersiz kılarak ipucunu görüntülemek için devre dışı bırakılmış düğmeleri alabilirsiniz.

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

Onay kutuları, metin kutuları ve benzeri araç ipuçları için umutsuzsanız (benim gibi), işte benim hokey çözümüm:

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

Çalışma örnekleri: http://jsfiddle.net/WB6bM/11/

Bunun değeri için, engelli form öğeleri üzerindeki araç ipuçlarının UX için çok önemli olduğuna inanıyorum. Birinin bir şey yapmasını engelliyorsanız, nedenini söylemelisiniz.

Bu geçici çözümler çirkin. Ben hata ayıkladım bootstrap otomatik olarak CSS özelliği işaretçi-olayları ayarlamak : hiçbiri devre dışı öğeleri.

Bu büyü özelliği, JS'nin CSS seçicisiyle eşleşen öğelerde herhangi bir olayı işleyememesine neden olur.

Varsayılan olarak bu özelliğin üzerine yazarsanız, her şey araç ipuçları da dahil olmak üzere bir cazibe gibi çalışır!

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

Bununla birlikte, bu kadar genel bir seçici kullanmamalısınız, çünkü muhtemelen JavaScript olay yayılımını bildiğiniz şekilde manuel olarak durdurmanız gerekecektir ( e.preventDefault () ).

Benim durumumda, yukarıdaki çözümlerin hiçbiri işe yaramadı. Ben mutlak bir öğe kullanarak devre dışı düğmesinin üst üste binmek için daha kolay buldum:

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

gösteri

Bu örneği deneyin:

Araç ipuçları aşağıdakilerle başlatılmalıdır jQuery: belirtilen öğeyi seçin ve şu tooltip()yöntemle çağırın JavaScript:

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

Ekle CSS:

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

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

Ve html'niz:

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

Araç ipucunu devre dışı bırakılmış bir düğmede gösteremezsiniz. Bunun nedeni, devre dışı bırakılan öğelerin araç ipucu da dahil olmak üzere hiçbir olayı tetiklememesidir. En iyi seçeneğiniz, devre dışı bırakılan düğmeyi taklit etmek olacaktır (böylece devre dışı gibi görünür ve davranır), böylece araç ipucunu tetikleyebilirsiniz.

Örneğin. JavaScript:

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

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

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

Devre dışı bırakılmış düğmeler için Bootstrap'ın "işaretçi olayları" stilini geçersiz kılabilirsiniz;

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

Daha da iyisi açık olun ve belirli düğmeleri devre dışı bırakın.

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

Ben ve tekromancr bu şekilde ortaya çıktı.

Örnek eleman:

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

not: araç ipucu özellikleri, .tooltip ('destroy') çağrılırken bu div kimliğinin kullanılacağı ayrı bir div öğesine eklenebilir; ya da .tooltip ();

bu araç ipucunu etkinleştirir, html dosyasında bulunan herhangi bir javascript'e koyar. ancak bu satırı eklemek gerekli olmayabilir. (araç ipucu bu satır olmadan görüntülenirse, dahil etmekten rahatsız olmayın)

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

araç ipucunu yok eder, kullanım için aşağıya bakın.

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

düğmenin tıklanabilir olmasını engeller. devre dışı bırakılan öznitelik kullanılmadığından, bu gereklidir, aksi takdirde düğme devre dışı bırakılmış gibi "görünse bile" yine de tıklanabilir olacaktır.

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

Bootstrap kullanarak, btn ve btn-devre dışı sınıfları kullanabilirsiniz. Bunları kendi .css dosyanızda geçersiz kılın. herhangi bir renk veya devre dışı bırakıldığında düğmenin nasıl görünmesini istediğinizi ekleyebilirsiniz. İmleci tuttuğunuzdan emin olun: varsayılan; Ayrıca .btn.btn-success'un neye benzediğini de değiştirebilirsiniz.

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

javascript'in etkinleştiği düğmeyi kontrol eden her şeye aşağıdaki kodu ekleyin.

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

araç ipucu artık yalnızca düğme devre dışı bırakıldığında gösterilmelidir.

angularjs kullanıyorsanız ben de bunun için bir çözüm var, isterseniz.

Herkese yardımcı olursa, içine bir açıklık koyarak ve araç ipucu öğelerini oraya uygulayarak bir araç ipucu göstermek için devre dışı bir düğme elde etmeyi başardım ...

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

Devre dışı bırakılan öğeler Devre dışı bırakılmış özniteliğe sahip öğeler etkileşimli değildir, yani kullanıcılar bir ipucu (veya popover) tetiklemek için odaklanamaz, üzerine gelemez veya tıklayamaz. Geçici bir çözüm olarak, araç ipucunu bir sarıcıdan tetiklemek veya ideal olarak tabindex = "0" kullanarak klavyeyle odaklanabilir hale getirmek ve devre dışı bırakılan öğedeki işaretçi olaylarını geçersiz kılmak isteyeceksiniz.

<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üm detaylar burada: Bootstrap 4 doc

Bootstrap 3.3.6 için çalışma kodu

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'ü kullanarak efekti taklit edebilirsiniz.

Sadece devre dışı durumunu düğmeden çıkarın ve araç ipucu artık görünmüyor .. kod daha az mantık gerektirdiğinden doğrulama için harikadır.

Açıklamak için bu kalemi yazdım.

CSS3 Devre Dışı Araç İpuçları

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

Görünür olarak devre dışı bırakmak için devre dışı bırakılan sınıfı devre dışı bırakılan öznitelik yerine düğmeye eklemeniz yeterlidir.

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

Not: Bu düğme yalnızca devre dışı bırakılmış gibi görünür, ancak yine de olayları tetikler ve sadece buna dikkat etmelisiniz.

pointer-events: auto;üzerinde çalışmaz <input type="text" />.

Farklı bir yaklaşım izledim. Giriş alanını devre dışı bırakmıyorum, ancak css ve javascript yoluyla devre dışı bırakıldım.

Giriş alanı devre dışı bırakılmadığından, araç ipucu düzgün görüntülenir. Benim durumumda, giriş alanının devre dışı bırakılması durumunda bir sarıcı eklemekten daha basitti.

$(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 için

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>

Sonunda bu sorunu, en azından Safari ile, "pointer-events: auto" ifadesini "devre dışı bırakılmadan" koyarak çözdüm . Ters sırada çalışmadı.