Wie aktiviere ich den Bootstrap-Tooltip auf der deaktivierten Schaltfläche?

171

Ich muss einen Tooltip auf einer deaktivierten Schaltfläche anzeigen und auf einer aktivierten Schaltfläche entfernen. Derzeit funktioniert es umgekehrt.

Was ist der beste Weg, um dieses Verhalten umzukehren?

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

Hier ist eine Demo

PS: Ich möchte das disabledAttribut behalten .

Lorraine Bernard
quelle
Die Schaltfläche, die deaktiviert werden muss, ist deaktiviert ...
KoU_warch
@EH_warch Ich möchte die Schaltfläche deaktiviert lassen, aber gleichzeitig einen Tooltip zum Klickereignis anzeigen.
Lorraine Bernard
2
Dies wird dem OP nicht helfen, aber zukünftige Besucher werden es möglicherweise zu schätzen wissen, dass das Attribut "schreibgeschützt" ähnlich (wenn auch nicht identisch) ist und Benutzerereignisse wie Mouseover nicht blockiert.
Chuck

Antworten:

19

Hier ist ein Arbeitscode : 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");
    }
});

Die Idee ist, den Tooltip mit der selectorOption zu einem übergeordneten Element hinzuzufügen und dann das relAttribut hinzuzufügen / zu entfernen , wenn die Schaltfläche aktiviert / deaktiviert wird.

mihai
quelle
4
Es ist die akzeptierte Antwort, weil es 2012 funktioniert hat, als es beantwortet wurde. Die Dinge haben sich seitdem geändert, hauptsächlich die externen Ressourcen, die in der Geige verwendet werden. Ich habe neue URLs zu Bootstrap-CDN hinzugefügt, der Code ist immer noch der gleiche.
Mihai
3
Kann ich ein aktualisiertes Update für Bootstrap Version 4.1 erhalten?
Jason Ayer
258

Sie können die deaktivierte Schaltfläche umbrechen und den Tooltip auf den Wrapper legen:

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

Wenn der Wrapper vorhanden ist, display:inlinescheint der Tooltip nicht zu funktionieren. Verwenden display:blockund display:inline-blockscheinen gut zu funktionieren. Es scheint auch gut mit einem schwebenden Wrapper zu funktionieren.

UPDATE Hier ist eine aktualisierte JSFiddle, die mit dem neuesten Bootstrap (3.3.6) funktioniert. Vielen Dank an @JohnLehmann für den Vorschlag pointer-events: none;für den deaktivierten Button.

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

Balexand
quelle
5
Dies ist, was die Dokumente vorschlagen und es funktioniert, wenn Sie den hier vorgeschlagenen Inline-Block-Trick verwenden!
Devil's Advocate
4
Wenn Ihre Schaltfläche jedoch Teil einer Schaltflächengruppe ist, führt das Umschließen der Schaltfläche zu einer Beeinträchtigung Ihrer Ästhetik :( Wie auch immer, um dieses Problem für btn-groups?
Cody
2
Cody, für BTN-Gruppen habe ich festgestellt, dass Sie sie nicht einpacken können oder dass sie nicht richtig gerendert werden. Ich habe Zeigerereignisse auf 'auto' gesetzt (nur mit dem Ziel: "div.btn-group> .btn.disabled {Zeigerereignisse: auto;}" für alle Fälle) und auch das Ereignis onclick der Schaltfläche so angeschlossen es gibt nur false zurück. Fühlte mich hacky, aber es funktionierte für unsere App.
Michael
3
Dies scheint in Bootstrap 3.3.5 nicht zu funktionieren. JSFiddle
bytesized
18
Fügen Sie für Bootstrap 3.3.5 auch .btn-default [disabled] {Zeigerereignisse hinzu: none; }
John Lehmann
111

Dies kann über CSS erfolgen. Die Eigenschaft "Zeigerereignisse" verhindert, dass der Tooltip angezeigt wird. Sie können deaktivierte Schaltflächen zum Anzeigen von QuickInfos erhalten, indem Sie die von Bootstrap festgelegte Eigenschaft "Zeigerereignisse" überschreiben.

.btn.disabled {
    pointer-events: auto;
}
Gene Parcellano
quelle
1
Nur eine Randnotiz, dies funktioniert nur für IE in 11 oder höher. So ziemlich alle anderen modernen Browser haben es für eine Weile unterstützt. Siehe: caniuse.com/#feat=pointer-events
Neil Monroe
11
Dies scheint bei [disabled]Schaltflächen nicht zu funktionieren . Bootstrap (2.3.2) weist außerdem keine Zeigerereignisse irgendwo in der Quelle zu.
Kangax
1
@kangax Sie haben Recht, dies funktioniert nur für Schaltflächen, die über die bs-Klasse 'disabled' deaktiviert wurden. Die Antwort von Balexand ( stackoverflow.com/a/19938049/1794871 ) funktioniert in diesem Fall am besten. Vielen Dank für den Hinweis.
Gene Parcellano
6
In einer Bootstrap3-Winkel-App ist nach dem Anwenden dieses Stils die deaktivierte Schaltfläche jetzt anklickbar
Dimitri Kopriwa
3
Ich habe versucht, dies auf einem Anker mit BTN-Klasse zu verwenden. Es sah deaktiviert aus und der Tooltip funktionierte, aber ich konnte auf den Link klicken (sollte nicht möglich sein).
Olle Härstedt
26

Wenn Sie verzweifelt (wie ich) nach QuickInfos zu Kontrollkästchen, Textfeldern und dergleichen suchen, finden Sie hier meine Problemumgehung:

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

Arbeitsbeispiele: http://jsfiddle.net/WB6bM/11/

Für das, was es wert ist, glaube ich, dass Tooltips zu deaktivierten Formularelementen für die UX sehr wichtig sind. Wenn Sie jemanden daran hindern, etwas zu tun, sollten Sie ihm sagen, warum.

nolanpro
quelle
1
Dies sollte die richtige Antwort sein. Scheint mir überhaupt nicht hackey :)
Starkers
5
Was für ein Albtraum für etwas, in das gebacken werden sollte :(
Devil's Advocate
1
Dies funktioniert gut, aber wenn sich Ihre Eingabepositionen basierend auf der Fenstergröße ändern (z. B. wenn Ihre Formularelemente umbrochen / verschoben werden), müssen Sie $ (window) .resize etwas behandeln, um das Tooltip div zu verschieben, oder sie werden angezeigt am falschen Ort. Ich empfehle, mit CMS Antwort von hier zu kombinieren
Ritter
6

Diese Problemumgehungen sind hässlich. Ich habe das Problem behoben, dass Bootstrap automatisch Zeigerereignisse für CSS-Eigenschaften festlegt: keine für deaktivierte Elemente.

Diese magische Eigenschaft führt dazu, dass JS kein Ereignis für Elemente verarbeiten kann, die mit dem CSS-Selektor übereinstimmen.

Wenn Sie diese Eigenschaft auf die Standardeinstellung überschreiben, funktioniert alles wie ein Zauber, einschließlich QuickInfos!

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

Sie sollten jedoch keinen so allgemeinen Selektor verwenden, da Sie wahrscheinlich die JavaScript-Ereignisausbreitung manuell stoppen müssen, wie Sie es kennen ( e.preventDefault () ).

lukyer
quelle
6

In meinem Fall hat keine der oben genannten Lösungen funktioniert. Ich fand, dass es einfacher ist, die deaktivierte Schaltfläche mit einem absoluten Element zu überlappen:

<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

vorillaz
quelle
5

Sie können den Tooltip nicht auf einer deaktivierten Schaltfläche anzeigen lassen. Dies liegt daran, dass deaktivierte Elemente keine Ereignisse auslösen, einschließlich des Tooltips. Am besten fälschen Sie die deaktivierte Schaltfläche (damit sie wie deaktiviert aussieht und sich so verhält), damit Sie den Tooltip auslösen können.

Z.B. Javascript:

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

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

Anstatt nur $('[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
quelle
1
Ich suche eine Lösung mit deaktivierter Schaltfläche.
Lorraine Bernard
1
@ Adam Utter Müll! Natürlich können Sie einen Tooltip für eine deaktivierte Schaltfläche erhalten!
Starkers
5

Versuchen Sie dieses Beispiel:

Tooltips müssen initialisiert werden mit jQuery: Wählen Sie das angegebene Element aus und rufen Sie die tooltip()Methode auf in JavaScript:

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

Hinzufügen CSS:

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

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

Und dein 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
quelle
4

Sie können den "Zeigerereignis" -Stil von Bootstrap für deaktivierte Schaltflächen einfach über CSS überschreiben, z

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

Besser noch explizit sein und bestimmte Schaltflächen deaktivieren, z

#buttonId[disabled] {
 pointer-events: all !important;
}
Ben Smith
quelle
1
Hat funktioniert! Danke dir!
Vedran Mandić
Ich bin froh, dass ich @ VedranMandić helfen konnte :)
Ben Smith
3

Das haben ich und Tekromancr erfunden.

Beispielelement:

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

Hinweis: Die Tooltip-Attribute können einem separaten Div hinzugefügt werden, in dem die ID dieses Div beim Aufrufen von .tooltip ('destroy') verwendet werden soll. oder .tooltip ();

Dadurch wird der Tooltip aktiviert und in ein beliebiges Javascript eingefügt, das in der HTML-Datei enthalten ist. Diese Zeile muss jedoch möglicherweise nicht hinzugefügt werden. (Wenn der Tooltip ohne diese Zeile angezeigt wird, müssen Sie ihn nicht einfügen.)

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

zerstört den Tooltip, siehe unten für die Verwendung.

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

verhindert, dass die Schaltfläche angeklickt werden kann. Da das Attribut disabled nicht verwendet wird, ist dies erforderlich. Andernfalls kann die Schaltfläche weiterhin angeklickt werden, obwohl sie so aussieht, als wäre sie deaktiviert.

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

Mit Bootstrap stehen Ihnen die Klassen btn und btn-disabled zur Verfügung. Überschreiben Sie diese in Ihrer eigenen CSS-Datei. Sie können beliebige Farben hinzufügen oder wie auch immer die Schaltfläche aussehen soll, wenn sie deaktiviert ist. Stellen Sie sicher, dass Sie den Cursor beibehalten: default; Sie können auch ändern, wie .btn.btn-success aussieht.

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

Fügen Sie den folgenden Code zu dem Javascript hinzu, das die Aktivierung der Schaltfläche steuert.

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

Der Tooltip sollte jetzt nur angezeigt werden, wenn die Schaltfläche deaktiviert ist.

Wenn Sie AngularJS verwenden, habe ich auch eine Lösung dafür, falls gewünscht.

user3885123
quelle
Bei der Verwendung destroydes Tooltips bin ich auf ein Problem gestoßen. (Siehe dies ) Aber $("#element_id").tooltip('disable')und $("#element_id").tooltip('enable')arbeite für mich.
Sam Kah Chiin
2

Wenn es jemandem hilft, konnte ich eine deaktivierte Schaltfläche zum Anzeigen eines Tooltips erhalten, indem ich einfach eine Spanne hineinlegte und das Tooltip-Material dort anbrachte, eckig um ihn herum ...

<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
quelle
1
Du bist brillant. So eine einfache Lösung.
brt
2

Basierend auf Bootstrap 4

Deaktivierte Elemente Elemente mit dem Attribut deaktiviert sind nicht interaktiv. Dies bedeutet, dass Benutzer nicht fokussieren, den Mauszeiger bewegen oder darauf klicken können, um einen Tooltip (oder ein Popover) auszulösen. Um dieses Problem zu umgehen, sollten Sie den Tooltip über einen Wrapper oder, idealerweise mit tabindex = "0" über die Tastatur fokussierbar machen, auslösen und die Zeigerereignisse für das deaktivierte Element überschreiben.

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

Alle Details hier: Bootstrap 4 doc

gon250
quelle
1
Vielen Dank für den Beitrag, kann glauben, dass ich dieses Setup übersehen habe.
Edd
1

Arbeitscode für 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
quelle
1

Sie können den Effekt mit CSS3 imitieren.

Nehmen Sie einfach den deaktivierten Status von der Schaltfläche und der Tooltip wird nicht mehr angezeigt. Dies ist ideal für die Validierung, da der Code weniger Logik erfordert.

Ich habe diesen Stift geschrieben, um ihn zu veranschaulichen.

CSS3 Disabled 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>
Beau
quelle
1

Fügen Sie einfach die deaktivierte Klasse anstelle des Attributs disabled zur Schaltfläche hinzu, um sie stattdessen sichtbar zu deaktivieren.

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

Hinweis: Diese Schaltfläche scheint nur deaktiviert zu sein, löst jedoch weiterhin Ereignisse aus, und Sie müssen dies nur berücksichtigen.

Mystisch
quelle
0

pointer-events: auto;funktioniert nicht auf einem <input type="text" />.

Ich habe einen anderen Ansatz gewählt. Ich deaktiviere das Eingabefeld nicht, sondern lasse es über CSS und Javascript deaktiviert wirken.

Da das Eingabefeld nicht deaktiviert ist, wird der Tooltip ordnungsgemäß angezeigt. In meinem Fall war es einfacher als das Hinzufügen eines Wrappers, falls das Eingabefeld deaktiviert war.

$(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
quelle
0

Für 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
quelle
0

Ich habe dieses Problem endlich gelöst, zumindest mit Safari, indem ich "pointer-events: auto" vor "disabled" gesetzt habe. Die umgekehrte Reihenfolge hat nicht funktioniert.

William Van Fleet
quelle