Bootstrap button tooltip auszublenden, klicken Sie auf

Auf meiner Website habe ich einige buttons. Wenn ein Benutzer auf die Schaltfläche klickt, wird ein modales öffnet. Wenn ein Benutzer mit der Maus über die Schaltfläche, einen tooltip, der angezeigt wird.

Ist, verwenden Sie diesen code:

<button type="button" rel="tooltip" title="Tooltip content" class="btn btn-sm btn-default" data-toggle="modal" data-target="#DeleteUserModal">
  <span class="glyphicon glyphicon-remove"></span>
</button>

<div>modal</div>

<script>
$(document).ready(function(){
  $('[]').tooltip();
});
</script>

Dieser funktioniert, aber das problem ist nur, dass der tooltip bleibt sichtbar, nachdem auf die Schaltfläche geklickt wird, und der modal angezeigt wird. Sobald das modal geschlossen ist, wird der tooltip wieder ausgeblendet.

Wie dies zu verhindern? Ich möchte nur, dass der tooltip gezeigt werden, auf zu schweben, und nicht alle die Zeit, wenn die damit verbundenen modal sichtbar ist.

  • verwenden Sie $('[rel=tooltip]').tooltip('deaktivieren') in der onclick-Funktion
InformationsquelleAutor Mbrouwer88 | 2016-01-29
  1. 38

    Es behoben, indem Sie.

    $(document).ready(function(){
    $('[rel=tooltip]').tooltip({ trigger: "hover" });
});

    Das problem war, dass der Fokus bleibt auf der Taste, wenn der modal geöffnet ist. Ändern Sie den trigger zu schweben, löst das problem.

    • Das hilft, aber ich habe noch ein ähnliches Problem mit einem dropdown-toggle tooltip. Auf eine Schaltfläche mit einer dropdown-Liste auswählen, ich habe einen tooltip auf den button und wenn Sie darauf klicken, werden die dropdown-zeigt aber der tooltip bleibt sichtbar, versucht mit $('body').klicken Sie auf( alle ausblenden von QuickInfos )
    • Schön. Es löste das problem.
    InformationsquelleAutor Mbrouwer88
  2. 7

    Für das gesamte Projekt zu hide tooltip 

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

       });
   });
    InformationsquelleAutor Adnan Ahmad
  3. 5

    Sollten Sie öffnen den modal manuell mit ein-Klick-Funktion und blenden Sie die QuickInfo manuell via jquery. So nehmen die modalen Wechsel Attribute aus dem Knopf-wie so: 

    <button type="button" rel="tooltip" title="Tooltip content" class="btn btn-sm btn-default">
  <span class="glyphicon glyphicon-remove"></span>
</button>

    öffnen und dann die modal mit Ihrem eigenen jquery-onclick-Funktion sowie ausblenden QuickInfo in der gleichen Zeit etwa so: 

    $(document).ready(function(){
  $('[]').tooltip();
  $('[pun">).on('click', function () {
    $(this).tooltip('hide');
    $("#DeleteUserModal").modal();
  });
});

    Hier ist ein Turnschuh, Ihnen zu zeigen, diese arbeiten Fiddle

    InformationsquelleAutor Steve K
  4. 1

    Wenn Sie möchten, schließen Sie den tooltip vor einer Handlung, diese:

    $('[data-toggle="tooltip"]').tooltip("hide");

    Zum Beispiel, ich will schließen Sie den tooltip vor der modal öffnen, hier mein code:

    function OpenModal() {
    $('[data-toggle="tooltip"]').tooltip("hide");
    $("#myModal").modal();
}
    InformationsquelleAutor tyrodeveloper
  5. 1

    Versuchen, diesen Javascript-code, ich habe es gerade ausprobiert, und es funktionierte für mich.

    $(function () {
    $('body').tooltip({
        selector: '[data-toggle="tooltip"]'
    }).click(function () {
        $('[data-toggle="tooltip"]').tooltip("hide");
    });
})
    InformationsquelleAutor RKS
  6. 0

    Nicht verwende data-Attribute aus mehreren Plug-ins auf das gleiche element. Zum Beispiel, ein button kann nicht beide haben ein tooltip, und setzen Sie ein modales. Um dies zu erreichen, verwenden Sie ein wrapperelement.

    • Ich habe versucht, wickeln Sie die Taste mit <div title="test"></div> und entfernen der tooltip vom button selbst. Denselben Effekt.
    • Hinzufügen data-toggle="tooltip" nicht rel.
    • Sorry, gleiche Wirkung. Es scheint irgendwie der "focus" bleibt auf den button bacause es ist schon geklickt sehe ich noch das "glühen" um den button in den hintergrund, wenn der modal geöffnet ist.
    InformationsquelleAutor mokiSRB
  7. 0
    $(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip({ trigger: "hover" });
});
    • Erklärung sollte helfen.
    • Während der code lösen kann der Fragende das problem, es wäre mehr hilfreich, um eine Erklärung, was der code tut und warum er löst das gestellte problem. Code ohne Erklärung ist weniger nützlich, um zukünftige querents suchen, ähnliche Probleme zu lösen.
    InformationsquelleAutor Pankaj Upadhyay
  8. 0

    Innerhalb Ihr document-ready-Funktion verwenden:

       $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip({
               trigger : 'hover'
            });
    });
    InformationsquelleAutor Siva Ganesh
Schreibe einen Kommentar