Ich habe einen Link, der die Twitter-Bootstrap-Popover-Version 1.3.0 verwendet, um einige Informationen anzuzeigen. Diese Information enthält einen Link, aber jedes Mal, wenn ich meine Maus vom Link zum Popover bewege, verschwindet das Popover einfach.
Wie kann ich Popover lange genug offen halten, damit sich die Maus darin bewegen kann? Wenn die Maus den Link und das Popover verlässt, verstecken Sie sie dann?
Oder gibt es ein anderes Plugin, das das kann?
Wenn Sie möchten, dass das Popover verschwindet, wenn der Benutzer den Popover und Quelllink verlässt, versuchen Sie dies einfach.
%Vor% Einfach, verwenden Sie einfach die Option container und haben Sie es als das Element, das das Popover aufruft. Auf diese Weise ist das Popover ein Kind des Elements, das es aufruft. Sie befinden sich also technisch immer noch über dem Elternteil, weil das Kind-Popover dazu gehört.
Zum Beispiel:
HTML:
%Vor%jQuery:
Ausführen einer $.each() -Schleife über jedes meiner Elemente, für die ich ein Popover an sein Elternelement binden möchte. In diesem Fall hat jedes Element die Klasse pop .
CSS:
Dieser Teil ist optional, wird aber empfohlen. Es bewegt den Popover um 7 Pixel für einen einfacheren Zugriff.
%Vor%Dieses Problem im Bootstrap github Repo behandelt dieses Problem. fat wies auf die experimentelle Platzierung "oben / unten / links / rechts" hin. Es funktioniert, ziemlich gut, aber Sie müssen sicherstellen, dass der Popover-Trigger nicht statisch mit CSS positioniert ist. Andernfalls erscheint das Popover nicht an der gewünschten Stelle.
HTML:
<span class="myClass" data-content="lorem ipsum content" data-original-title="pop-title">Hover me to show a popover.</span>
CSS:
%Vor%JS:
%Vor%Hier ist meine Meinung: Ссылка
Wenn Sie die Maus vom Popover-Auslöser zum tatsächlichen Popover-Inhalt diagonal bewegen, bewegen Sie sich manchmal über die darunter liegenden Elemente. Ich wollte mit solchen Situationen umgehen - solange Sie Popover-Inhalte erreichen, bevor das Zeitlimit ausgelöst wird, sind Sie sicher (das Popover wird nicht verschwinden). Es erfordert delay -Option.
Dieser Hack setzt Popover leave function im Grunde außer Kraft, ruft aber das Original auf (welches den Timer startet, um das Popover zu verbergen). Dann fügt er einen einmaligen Listener an mouseenter popover Inhaltselement an.
Wenn die Maus das Popover betritt, wird der Timer gelöscht. Dann schaltet es auf mouseleave auf popover und wenn es ausgelöst wird, ruft es die ursprüngliche Leave-Funktion auf, so dass es den Versteck-Timer starten könnte.
Schließlich behebe ich dieses Problem. Popover verschwindet, weil Popover kein Kindknoten der Verbindung ist, sondern ein Kindknoten des Körpers.
Also fix es ist einfach, ändere bootstrap-twipsy.js content:
ändern Sie .prependTo(document.body) in .prependTo(this.$element)
und beheben Position Problem Ursache durch Änderung.
und einige verwenden Link Tiger Popover wird auch Popover mit Link verursachen, also fügen Sie einen Bereich enthalten Link, so Problem gelöst.
Dies ist eine Version von Wojtek Kruszewski Lösung. Dieses Versions-Handle-Popover blinkt, wenn die Maus zum Auslösen zurückkehrt. Ссылка
%Vor%Ich habe versucht, die Lösungen von @Wotjek Kruszewski und @danielgatis, aber keiner arbeitete für mich. Vorbehalt: Ich verwende Bootstrap v2.1.0, nicht v3. Diese Lösung ist in coffeescript (warum verwenden Leute immer noch plain javascript? =)).
%Vor%Hier ist, was ich getan habe:
%Vor%Dies ist eine sehr einfache und ehrliche Lösung für dieses Problem, die ich durch einen Blick in den Bootstrap-Tooltip-Code herausgefunden habe. In Bootstrap v3.0.3 ist hier die Codezeile, die ich bemerkt habe:
%Vor% dies besagt, dass, wenn container property of popover definiert ist, das Popover appendTo () das Element anstelle von insertAfter () das ursprüngliche Element erhält, alles, was Sie tun müssen, ist einfach das Element als Container-Eigenschaft übergeben. Aufgrund von appendTo () wird das Popover Teil des Links, an dem das Hover-Ereignis gebunden wurde, und hält so das Popover geöffnet, wenn sich die Maus darauf bewegt.
Am Ende der Unterhaltung, die von @stevendaniels verlinkt wird, ist ein Link zu einer Twitter Bootstrap-Erweiterung namens BootstrapX - Clickover von Lee Carmichael. Dadurch wird das Popover von einem übergroßen Tooltip in ein interaktives Steuerelement geändert, das durch Klicken auf eine andere Stelle im Formular, eine Schließen-Schaltfläche oder nach einer Zeitüberschreitung geschlossen werden kann. Es ist einfach zu bedienen und funktionierte sehr gut für das Projekt, in dem ich es brauchte. Einige Beispiele für seine Verwendung finden Sie hier .
Ich mochte keine der Antworten, die ich gefunden habe, also habe ich einige Antworten kombiniert, die nah dran waren, um den folgenden Code zu schreiben. Es erlaubt Ihnen, am Ende jedes Mal $(selector).pinnablepopover(options); einzugeben, wenn Sie ein "pinnable" Popover machen wollen.
Code, der die Dinge vereinfacht:
%Vor%Beispielverwendung:
%Vor%Nachdem ich alle Antworten gesehen habe, die ich gemacht habe, denke ich, dass es hilfreich sein wird. Sie können alles verwalten, was Sie brauchen. Viele Antworten machen keine Showverzögerung, die ich benutze. Seine Arbeit ist sehr nett in meinem Projekt / ****** / ************************************************* ************ /
%Vor%/ **************** SCRIPT CODE ****************** BITTE VON HEAR ****** /
%Vor%Tags und Links javascript jquery twitter-bootstrap twitter-bootstrap-3 popover