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

171

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.

Lorraine Bernard
źródło
przycisk, który należy wyłączyć, jest wyłączony ...
KoU_warch
@EH_warch Chcę, aby przycisk był wyłączony, ale jednocześnie wyświetlać podpowiedź po kliknięciu.
Lorraine Bernard
2
To nie pomoże OP, ale przyszli goście mogą docenić fakt, że atrybut „tylko do odczytu” jest podobny (choć nie identyczny) i nie blokuje zdarzeń użytkownika, takich jak najechanie kursorem myszy.
Chuck

Odpowiedzi:

20

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.

mihai
źródło
4
Jest to akceptowana odpowiedź, ponieważ zadziałała w 2012 roku, kiedy została udzielona. Od tego czasu sytuacja się zmieniła, głównie zasoby zewnętrzne używane w skrzypcach. Dodałem nowe adresy URL do bootstrap cdn, kod jest nadal ten sam.
mihai
3
Czy mogę uzyskać zaktualizowaną poprawkę dla wersji Bootstrap 4.1?
Jason Ayer
258

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/

balexand
źródło
5
To jest to, co sugerują dokumenty i działa, jeśli używasz sugerowanej tutaj sztuczki inline-block!
Devil's Advocate
4
Jeśli jednak twój przycisk jest częścią grupy przycisków, to zawijanie przycisku odrzuca twoją estetykę :( W każdym razie, aby rozwiązać ten problem dla btn-groups?
Cody
2
Cody, w przypadku grup btn odkryłem, że nie możesz ich opakować lub nie zostaną poprawnie wyrenderowane. Ustawiłem pointer-events na „auto” (tylko kierowałem na: „div.btn-group> .btn.disabled {pointer-events: auto;}” na wszelki wypadek), a także podłączyłem zdarzenie onclick przycisku, więc po prostu zwraca fałsz. Czułem się hacky, ale zadziałało w naszej aplikacji.
Michael
3
Wydaje się, że nie działa to w bootstrap 3.3.5. JSFiddle
bajtyzowano
18
Dla bootstrap 3.3.5 dodaj także .btn-default [disabled] {pointer-events: none; }
John Lehmann,
111

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;
}
Gene Parcellano
źródło
1
Na marginesie, działa to tylko w IE w wersji 11 lub nowszej. Prawie wszystkie inne współczesne przeglądarki obsługują go od jakiegoś czasu. Zobacz: caniuse.com/#feat=pointer-events
Neil Monroe
11
To nie wydaje się działać na [disabled]przyciskach. Nie patrz także Bootstrap (2.3.2) przypisujący zdarzenia wskaźnika w dowolnym miejscu w źródle.
kangax
1
@kangax masz rację, to zadziała tylko dla przycisków wyłączonych przez klasę bs „disabled”. W takim przypadku najlepiej sprawdzi się odpowiedź Balexand ( stackoverflow.com/a/19938049/1794871 ). Dzięki za zwrócenie uwagi.
Gene Parcellano
6
W aplikacji kątowej bootstrap3, po zastosowaniu tego stylu, wyłączony przycisk jest teraz klikalny
Dimitri Kopriwa
3
Próbowałem użyć tego na kotwicy z klasą btn. To wyglądało niepełnosprawnych i podpowiedzi pracował, ale mogę kliknąć na link (nie powinno być możliwe).
Olle Härstedt
26

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.

nolanpro
źródło
1
To powinna być prawidłowa odpowiedź. Wcale nie wydaje mi się to trudne :)
Starkers
5
Co za koszmar dla czegoś, co powinno być upieczone :(
Devil's Advocate
1
Działa to dobrze, ale jeśli pozycje wejściowe zmieniają się w zależności od rozmiaru okna (np. Zawijanie / przenoszenie elementów formularza), będziesz musiał dodać obsługę do $ (okno). Zmień rozmiar, aby przesunąć element div podpowiedzi, albo pojawią się w złym miejscu. Polecam połączenie z odpowiedzią CMS stąd: stackoverflow.com/questions/2854407/…
knighter
6

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 () ).

lukyer
źródło
6

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

vorillaz
źródło
5

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/

Adam
źródło
1
Szukam rozwiązania z wyłączonym przyciskiem.
Lorraine Bernard
1
@Adam Kompletne śmieci! Oczywiście możesz otrzymać wskazówkę dotyczącą wyłączonego przycisku!
Starkers
5

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>
Denis Bubnov
źródło
4

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;
}
Ben Smith
źródło
1
Pracowałem! Dziękuję Ci!
Vedran Mandić
Cieszę się, że mogłem pomóc @ VedranMandić :)
Ben Smith
3

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.

user3885123
źródło
Napotkałem pewien problem podczas korzystania destroyz podpowiedzi. (Zobacz to ) Jednak $("#element_id").tooltip('disable')i $("#element_id").tooltip('enable')pracuj dla mnie.
Sam Kah Chiin
2

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>
Nathan Beach
źródło
1
Jesteś genialny. Takie proste rozwiązanie.
brt
2

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

gon250
źródło
1
Dzięki za post, mogę uwierzyć, że przeoczyłem tę konfigurację.
Edd
1

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;
}
Nerian
źródło
1

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>
amant
źródło
1

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

Mistyczne
źródło
0

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

John Smith
źródło
0

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>

Helgi Kropp
źródło
0

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

William Van Fleet
źródło