Jak włączyć podpowiedź Bootstrap na wyłączonym przycisku?

Muszę wyświetlić podpowiedź na wyłączonym przycisku i usunąć ją z włączonego przycisku. Obecnie działa odwrotnie.

Jaki jest najlepszy sposób na odwrócenie tego zachowania?

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

Oto demo

PS: Chcę zachować disabledatrybut.

Oto działający kod: 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");
    }
});

Chodzi o to, aby dodać podpowiedź do elementu nadrzędnego z selectoropcją, a następnie dodać / usunąć relatrybut podczas włączania / wyłączania przycisku.

Możesz zawinąć wyłączony przycisk i umieścić etykietkę na opakowaniu:

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

Jeśli opakowanie ma, display:inlineto podpowiedź nie działa. Używanie display:blocki display:inline-blockwydaje się działać dobrze. Wydaje się również, że działa dobrze z pływającą owijką.

UPDATE Oto zaktualizowany JSFiddle, który współpracuje z najnowszym Bootstrapem (3.3.6). Podziękowania dla @JohnLehmann za sugestię pointer-events: none;dotyczącą wyłączonego przycisku.

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

Można to zrobić za pomocą CSS. Właściwość „pointer-events” zapobiega wyświetlaniu podpowiedzi. Możesz wyłączyć przyciski do wyświetlania podpowiedzi, nadpisując właściwość „pointer-events” ustawioną przez bootstrap.

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

Jeśli desperacko (tak jak ja) szukasz podpowiedzi do pól wyboru, pól tekstowych i tym podobnych, oto moje hackey obejście:

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

Przykłady robocze: http://jsfiddle.net/WB6bM/11/

Biorąc pod uwagę jego wartość, uważam, że podpowiedzi dotyczące wyłączonych elementów formularza są bardzo ważne dla UX. Jeśli powstrzymujesz kogoś przed zrobieniem czegoś, powinieneś powiedzieć mu dlaczego.

Te obejścia są brzydkie. Problem polega na tym, że bootstrap automatycznie ustawia właściwość CSS pointer-events: none na wyłączonych elementach.

Ta magiczna właściwość powoduje, że JS nie jest w stanie obsłużyć żadnego zdarzenia na elementach pasujących do selektora CSS.

Jeśli nadpiszesz tę właściwość na domyślną, wszystko będzie działać jak urok, łącznie z podpowiedziami!

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

Nie powinieneś jednak używać tak ogólnego selektora, ponieważ prawdopodobnie będziesz musiał ręcznie zatrzymać propagację zdarzeń JavaScript w znany Ci sposób ( e.preventDefault () ).

W moim przypadku żadne z powyższych rozwiązań nie zadziałało. Zauważyłem, że łatwiej jest nałożyć wyłączony przycisk za pomocą elementu absolutnego, takiego jak:

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

Próbny

Nie możesz wyświetlić podpowiedzi na wyłączonym przycisku. Dzieje się tak, ponieważ wyłączone elementy nie wyzwalają żadnych zdarzeń, w tym podpowiedzi. Najlepszym rozwiązaniem byłoby sfałszowanie wyłączenia przycisku (tak, aby wyglądał i zachowywał się jak wyłączony), aby można było uruchomić podpowiedź.

Na przykład. JavaScript:

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

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

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

Wypróbuj ten przykład:

Etykietki narzędzi należy zainicjować za pomocą jQuery: wybierz określony element i wywołaj tooltip()metodę w JavaScript:

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

Dodaj CSS:

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

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

A twój html:

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

Możesz po prostu nadpisać styl „pointer-events” Bootstrapa dla wyłączonych przycisków za pomocą CSS, np

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

Lepiej nadal być wyraźnym i wyłączać określone przyciski, np

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

Oto, co wymyśliłem ja i technik.

Przykładowy element:

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

uwaga: atrybuty podpowiedzi można dodać do oddzielnego elementu div, w którym jego identyfikator będzie używany podczas wywoływania .tooltip ('zniszcz'); lub .tooltip ();

włącza to podpowiedź, umieść ją w dowolnym skrypcie javascript zawartym w pliku html. dodanie tej linii może jednak nie być konieczne. (jeśli podpowiedź pokazuje bez tej linii, nie przejmuj się tym)

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

niszczy podpowiedź, zobacz poniżej do użycia.

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

zapobiega klikaniu przycisku. ponieważ atrybut disabled nie jest używany, jest to konieczne, w przeciwnym razie przycisk nadal byłby klikalny, mimo że „wygląda” tak, jakby był wyłączony.

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

Używając bootstrap, dostępne są klasy btn i btn-disabled. Zastąp je we własnym pliku .css. możesz dodać dowolne kolory lub cokolwiek chcesz, aby przycisk wyglądał po wyłączeniu. Upewnij się, że trzymasz kursor: default; możesz także zmienić wygląd .btn.btn-success.

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

dodaj poniższy kod do tego, co javascript kontroluje włączanie przycisku.

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

podpowiedź powinna teraz wyświetlać się tylko wtedy, gdy przycisk jest wyłączony.

jeśli używasz angularjs, mam również na to rozwiązanie, jeśli chcesz.

Jeśli to komuś pomogło, udało mi się uzyskać wyłączony przycisk, aby wyświetlić podpowiedź, po prostu umieszczając w nim rozpiętość i stosując tam elementy podpowiedzi, wokół niego 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>

Oparty na Bootstrap 4

Elementy wyłączone Elementy z atrybutem disabled nie są interaktywne, co oznacza, że ​​użytkownicy nie mogą skupiać się na nich, najeżdżać na nie ani klikać w celu wywołania podpowiedzi (lub okienka). Aby obejść ten problem, będziesz chciał wywołać podpowiedź z opakowania lub, najlepiej, aby można było ustawić fokus na klawiaturze za pomocą tabindex = "0", i nadpisać zdarzenia wskaźnika na wyłączonym elemencie.

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

Wszystkie szczegóły tutaj: Bootstrap 4 doc

Działający kod dla 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;
}

Możesz naśladować efekt za pomocą CSS3.

Po prostu zdejmij stan wyłączony z przycisku, a podpowiedź nie będzie się już pojawiać. Jest to świetne do weryfikacji, ponieważ kod wymaga mniej logiki.

Napisałem to pióro, aby zilustrować.

CSS3 wyłączone podpowiedzi

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

Po prostu dodaj klasę disabled do przycisku zamiast do atrybutu disabled, aby zamiast tego była widocznie wyłączona.

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

Uwaga: ten przycisk tylko wydaje się być wyłączony, ale nadal wyzwala zdarzenia i po prostu musisz o tym pamiętać.

pointer-events: auto;nie działa na <input type="text" />.

Przyjąłem inne podejście. Nie wyłączam pola wejściowego, ale sprawiam, że działa jako wyłączone przez css i javascript.

Ponieważ pole wejściowe nie jest wyłączone, podpowiedź jest wyświetlana poprawnie. W moim przypadku było to o wiele prostsze niż dodanie wrappera na wypadek, gdyby pole wejściowe było wyłączone.

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

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

W końcu rozwiązałem ten problem, przynajmniej w Safari, umieszczając „pointer-events: auto” przed „disabled”. Odwrotna kolejność nie zadziałała.