Ich kann nicht beide "Hover" und "OutsideClick" Trigger auf Angular Bootstrap Tooltips verwenden

Question

Ich benutze Angular Bootstrap und möchte meine Tooltips auslösen mit einem "Hover" auf dem Desktop und "Klicken" auf mobilen Geräten, die können Bewegen Sie den Mauszeiger nicht, aber schließen Sie die Tooltips, wenn Sie außerhalb des Tooltips klicken. Ich setze es auf tooltip-trigger = "Hover outsideClick" seit "outsideClick" ist jetzt ein unterstützter Trigger (https://github.com/angular-ui/bootstrap/tree/master/src/tooltip/docs), jedoch bricht dies die Tooltip vollständig, so dass selbst der Hover nicht funktioniert.

<span class="glyphicon glyphicon-info-sign" tooltip-trigger="hover outsideClick" uib-tooltip="Tooltip text here"></span> 

Gibt es eine Möglichkeit, diese zusammenzuarbeiten?

Wenn ich Tooltip-Trigger nur verwenden = „schweben auf“ es ist in Ordnung, aber auf Handy kann ich nur den Tooltip in die Nähe wieder auf das Element klicken, im Vergleich zu anderer Stelle auf der Seite, um es zu schließen in der Lage zu klicken.

Answer 1

Haben Sie versucht tooltip-trigger="mouseenter outsideClick"? Es scheint wie hover wird nicht in dem Dokument erwähnt.

Answer 2

Wenn es eine Chance gibt, können Sie die native Bootstrap-Bibliothek verwenden? Wie es standardmäßig unterstützt, was Sie suchen.

Ich habe ein erstellt jsfiddle demonstriert dies (bitte auf Ihrem mobilen Gerät sehen die tootlips zu sehen wie erwartet)

HTML:

<div class="row"> 
    <div class="col-md-12"> 
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button> 
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button> 
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button> 
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button> 
    </div> 
</div> 

JS:

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

Sie kann man darüber lesen here, als Randnotiz, müssen Sie den Tooltip

manuell aktivieren

Aus Leistungsgründen sind die Tooltip- und Popover-Daten-Apis aktiviert, , was bedeutet, dass Sie sie selbst initialisieren müssen.

Eine Möglichkeit, alle Tooltips auf einer Seite zu initialisieren wäre sie durch ihre data-toggle Attribut zu wählen:

Answer 3

Ich denke, was Sie suchen die tooltip-trigger="hover focus" ist, die focus als outsideClick wirken wird, Schließen der QuickInfo beim nächsten Klick des Benutzers. Ich habe das persönlich genutzt und es funktioniert sowohl für Mobilgeräte als auch für Desktops.

Es tatsächlich standardmäßig hover focus, so dass Sie sie nicht einmal manuell hinzufügen müssen.