wake-up-neo.net

Wie aktiviere ich Bootstrap Tooltip auf deaktivierter Schaltfläche?

Ich muss einen Tooltip auf einer deaktivierten Schaltfläche anzeigen und ihn auf einer aktivierten Schaltfläche entfernen. Derzeit funktioniert es in umgekehrter Reihenfolge.

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

P .: Ich möchte das disabled Attribut behalten.

153

Hier ist ein funktionierender Code: 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, die QuickInfo mit der Option selector einem übergeordneten Element hinzuzufügen und dann das Attribut rel hinzuzufügen/zu entfernen, wenn die Schaltfläche aktiviert/deaktiviert wird.

16
mihai

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

<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 display:inline dann scheint der Tooltip nicht zu funktionieren. Mit display:block und display:inline-block scheint gut zu funktionieren. Es scheint auch gut mit einem Floated-Wrapper zu funktionieren.

UPDATE Hier ist eine aktualisierte JSFiddle-Version, die mit der neuesten Version von Bootstrap (3.3.6)) funktioniert. Vielen Dank an @JohnLehmann für den Vorschlag von pointer-events: none; für die deaktivierte Schaltfläche.

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

236
balexand

Dies kann über CSS erfolgen. Die Eigenschaft "pointer-events" verhindert, dass die QuickInfo angezeigt wird. Sie können deaktivierte Schaltflächen zum Anzeigen von QuickInfos erhalten, indem Sie die von bootstrap festgelegte Eigenschaft "pointer-events" überschreiben.

.btn.disabled {
    pointer-events: auto;
}
106
Gene Parcellano

Wenn Sie verzweifelt nach Tooltips für Checkboxen, Textboxen und dergleichen suchen (so wie ich), dann ist hier meine hackey 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/

Ich halte Tooltips für deaktivierte Formularelemente für sehr wichtig für die UX. Wenn Sie jemanden daran hindern, etwas zu tun, sollten Sie ihm sagen, warum.

24
nolanpro

Diese Problemumgehungen sind hässlich. Ich habe das Problem behoben, dass bootstrap automatisch CSS-Eigenschaft gesetzt Zeiger-Ereignisse: keine für deaktivierte Elemente.

Diese magische Eigenschaft bewirkt, dass JS keine Ereignisse für Elemente verarbeiten kann, die mit der CSS-Auswahl übereinstimmen.

Wenn Sie diese Eigenschaft auf Standard überschreiben, funktioniert alles wie ein Zauber, einschließlich Tooltips!

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

Sie sollten jedoch nicht den allgemeinen Selektor verwenden, da Sie wahrscheinlich die Weitergabe von JavaScript-Ereignissen manuell stoppen müssen, wie Sie wissen (e.preventDefault ()).

6
lukyer

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 den deaktivierten Button (sieht also so aus und verhält sich auch so), damit Sie den Tooltip auslösen können.

Z.B. Javascript:

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

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

Anstelle von 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/

5
Adam

Versuchen Sie dieses Beispiel:

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

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

CSS hinzufügen:

.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>
5
Denis Bubnov

In meinem Fall hat keine der oben genannten Lösungen funktioniert. Ich habe festgestellt, 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

5
vorillaz

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

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

Seien Sie lieber explizit und deaktivieren Sie bestimmte Schaltflächen, z.

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

Das haben ich und tekromancr uns ausgedacht.

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 QuickInfo-Attribute können zu einem separaten div hinzugefügt werden, in dem die ID dieses div verwendet wird, wenn .tooltip ('destroy') aufgerufen wird. oder .tooltip ();

dadurch wird der Tooltip aktiviert und in jedes in der HTML-Datei enthaltene Javascript eingefügt. Diese Zeile muss jedoch möglicherweise nicht hinzugefügt werden. (Wenn der Tooltip ohne diese Zeile angezeigt wird, müssen Sie ihn nicht einschließen.)

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

zerstört 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, da ansonsten die Schaltfläche weiterhin anklickbar ist, obwohl sie so aussieht, als wäre sie deaktiviert.

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

Mit Hilfe von 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 die Schaltfläche aussehen soll, wenn sie deaktiviert ist. Stellen Sie sicher, dass Sie den Cursor behalten: 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, mit dem die Schaltfläche aktiviert wird.

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

der Tooltipp sollte jetzt nur angezeigt werden, wenn die Schaltfläche deaktiviert ist.

wenn Sie anglejs verwenden, habe ich auch eine Lösung dafür, wenn gewünscht.

3
user3885123

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

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 deaktiviert 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>
1
beau

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 per CSS und Javascript deaktiviert werden.

Da das Eingabefeld nicht deaktiviert ist, wird der Tooltip korrekt angezeigt. In meinem Fall war es einfacher als einen Wrapper hinzuzufügen, 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">
0
John Smith

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>
0
Helgi Kropp