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

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 .

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.

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/

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

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.

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

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

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/

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>

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

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.

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>

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

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

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>

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.

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

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>

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.