Wie zu inspizieren JQuery UI tooltip?

Ich habe eine Standard JQuery-UI-tooltip-Funktion rufen Sie auf meiner Seite. Gibt es eine Möglichkeit, um Stil der tooltip div interaktiv mit dem Inspektor? Hätte ich zwei Mauszeiger, würde man die Maus über ein element zu halten, wird die QuickInfo angezeigt, und die zweite wäre mit dem Inspektor und bauen Sie den Stil. Aber ich habe nur eine Maus, und sobald es sich aus dem element, so wird der tooltip verschwindet. Die überprüfung der ":hover" - Zustand in den Inspektor nicht helfen. der tooltip verschwindet bei mouse out.

Ich bin mit Chrome, aber irgendeinen trick in jedem browser tun würde.

Mögliche Duplikate von :hover-Zustand in den Chrome Entwickler-Tools

InformationsquelleAutor camcam | 2013-09-15

google-chrome javascript

5

Meine funktionierende Lösung im Firefox:

1. bewegen Sie den Mauszeiger über tooltip (tooltip angezeigt wird)

2. Treffer CMD-Option-K (OSX) oder CTRL-Shift-K (Windows) öffnen Sie "Web-Konsole"

3. geben Sie "debugger" (dies wird stop-JS Ausführung, so dass der tooltip wird nicht verschwinden)

4. öffnen Sie "Inspector" - Registerkarte, suchen Sie nach .ui-tooltip

5. Bearbeiten wie nötig. Hinweis: änderungen an der CSS werden sofort mit der Arbeit, auch wenn die Ausführung von JavaScript ist gestoppt
- Dieser arbeitete für mich, wie vor einem Monat, aber nicht jetzt 🙁 Sobald ich auf den hot-key-der tooltip verschwindet. Meine Lösung war zu laufen setTimeout(function(){debugger}, 1000) in die Konsole, wechseln Sie schnell und Holen Sie sich die QuickInfo auf.
InformationsquelleAutor maosmurf
10

Fand ich ein workaround, wie temporäre überprüfen :

einfach umzusetzen ausblenden-Einstellungen, wo Sie Anschluß der tooltip Logik:
```
hide: {
          effect: "slideDown",
          delay: 20000
      }
```
Diese erhalten Sie 20 Sekunden Zeit, um Sie zu inspizieren. Wenn Sie mehr Zeit benötigen, dann erhöhen Sie die "delay" - Attribut.
Hier mein funktionierenden code für die Seite, jquery tooltips:
```
    $(function() {
    $(document).tooltip({
            tooltipClass: "jqueryTooltip",
            content: function() {
                return $(this).attr('title');
            },
            hide: {
                effect: "slideDown",
                delay: 20000
            }
        });
    });
```
Nachdem Sie fertig sind mit der überprüfung entfernen Sie einfach die Verzögerung und Sie sind fertig.

Hinweis: ich bin mit custom class "jqueryTooltip" Stil der tooltip nach der Inspektion.

InformationsquelleAutor user3199365
4

Ich bin spät zur party, aber es ist eigentlich ein einfacher Weg, dies zu erreichen.

In Ihrem browser-dev-Konsole verwenden jQuery, um das Ziel tooltip wie folgt:

$('.selector').tooltip('open');

In meinem Fall zum Beispiel habe ich eine Klasse .grey-tooltip auf mein tooltip, so nenne ich $('.grey-tooltip').tooltip('open');. Dies sollte öffnen Sie die QuickInfos und die können Sie dann prüfen Sie wie jedes andere sichtbare element.

Verschiedene Methoden, die Sie verwenden können, eines tooltips sind beschrieben in Ihren docs hier: https://api.jqueryui.com/tooltip/.
- $('.selector').tooltip('show') für Bootstrap tooltips
InformationsquelleAutor AnnieP
3

der einfache Weg ist, um zu pausieren js mit [F8], wenn der tooltip angezeigt wird

InformationsquelleAutor عارف بن الأزرق
0

Sollte es möglich sein, ändern Sie die CSS so, dass der tool-Tipp ist immer sichtbar, im Gegensatz zu schweben, nur, an welcher Stelle Sie könnte zwicken die div ' s styling über den Inspektor und sehen, wie es betroffenen in Echtzeit.
- Ja, aber die CSS zu ändern? Zum Beispiel auf diese Seite: jqueryui.com/tooltip - wenn ich will, um interaktiv Stil der tooltip, der erscheint, wenn die Maus über das Eingabefeld ("Ihr Alter"), was tun? Soweit ich das bemerkt, die Maus bewegt sich nicht nur verstecken der tooltip, aber löscht Sie aus dem DOM.
- Es scheint also So, meine Lösung funktioniert hier nicht dann. Man konnte sich in einem benutzerdefinierten div für den tooltip anstelle der Standard-Titel attr. Aber ich sehe nicht, eine option für die, die in der kleinen Menge googeln habe ich nur.
InformationsquelleAutor Carter
0

Wenn Sie öffnen Sie die Entwickler-tools in der neuesten Google Chrome-Sie sollten finden Sie unter dem Register "Elemente" ausgewählt ist. Auf das element, das Sie haben, um bewegen Sie die Maus über Sie nur mit der rechten Maustaste darauf und öffnen Sie die "Force element state" - Menü wählen Sie die :hover-option.
- Dies war die erste Sache, die ich versuchte. Aber wie ich schon schrieb in meiner Frage, die überprüfung der ":hover" - Zustand in den Inspektor nicht-tooltip angezeigt, es scheint keinen Einfluss auf javascript-Ereignisse.
InformationsquelleAutor 123
0

Sie können nicht ändern, ein jQuery-tooltip styling in einem browser-Inspektor, denn wie Sie sagen, es ist aus dem DOM entfernt auf mouseout.

Jedoch, mit dem folgenden code das ist, was ich Tat, zu ändern, um das styling:
```
$("#myElement").attr({
    title: "my tooltip text"
}).tooltip();

$("#myElement").tooltip({
    //the .tooltip class is applied by default anyway
    tooltipClass: "tooltip"
});
```
1. Typ debugger; im JavaScript, bevor der Vorherige code
2. In Firefox, drücken Sie F12 öffnen Firebug (herunterladen, wenn Sie es nicht haben)
3. Wählen Sie die Skript Registerkarte, und klicken Sie auf Reload
4. Nun, dass der debugger aktiviert wird, markieren Sie
  $("#myElement").tooltip aus dem 2. code-block (ohne Klammern) mit der rechten Maustaste auf den markierten text, und
  wählen Sie Add Watch
5. Unter der Uhr Registerkarte im rechten Fenster, klicken Sie auf +
  neben $("#myElement").tooltip zu erweitern, der alle Eigenschaften
6. Unter erweitern Konstruktor, dann DEFAULTS, und dann
  Vorlage zu sehen, die HTML, dass der tooltip ist aus
Dies ist dann der exponierten HTML-Struktur eines jQuery-tooltip:
```
<div class="tooltip">
    <div class="tooltip-arrow"> ... </div>
    <div class="tooltip-inner"> ... </div>
</div>
```
...und jetzt können Sie CSS anzuwenden, so etwas wie dieses:
```
.tooltip {
    background-color: blue;
    border: 2px solid black;
    border-radius: 5px;
}
.tooltip-arrow {
    /* hackery, placing the arrow where it should be: */
    margin-bottom: -7px;
}
.tooltip-inner {
    /* hackery, making all browsers render the width correctly: */
    width: 300px;
    min-width: 300px;
    max-width: 300px;

    /* hackery, removing some unknown applied background: */
    background: none;
    background-color: none;

    color: white;
    text-align: center;
}
```
Alle "Hack" erwähnt, in der CSS oben ist, was ich hatte tun können, um Bootstrap zu spielen schön mit jQuery (Sie haben beide eine tooltip, die in Konflikt mit einander-sehen https://stackoverflow.com/a/19247955 für mehr info).
- Ich fand einige Geige, fügte der debugger-Befehl und fügte hinzu, die Uhr manuell (Rechte Maustaste funktionierte nicht). Aber ich kann nicht finden, finden Sie die Konstruktor->STANDARD->template, hier ist die Struktur, die ich sehe: s25.postimg.org/7enmrwe9r/img11.jpg
- Wow komisch, es scheint, dass jsFiddle erweitert beliebige JavaScript-Objekte erstellt, so dass es wahrscheinlich nicht möglich zu sehen, auf diese Weise. Zu reproduzieren, was ich Tat, Sie müssen diesen code in Ihren eigenen HTML.
- Ich habe diesen auf meine eigentliche Seite, aber der STANDARDWERTE->Vorlage gab es nicht überall. Auch der tooltip-html-Struktur, die Sie gefunden haben, ist anders als das, was ich gefunden (in meiner Antwort). Vielleicht ist das jQuery-ui version war anders (ich benutze 1.10).
InformationsquelleAutor Ian Campbell

Hier ist was ich getan habe:

jQuery(".myDiv").attr("title", 'Hello');
jQuery(".myDiv").tooltip({close: function( event, ui ) {
  console.log(jQuery(ui.tooltip[0]).html());
}});

Und die Konsole war der Inhalt:

<div class="ui-tooltip-content">Hello</div>

Auch, ich setzte einen breakpoint auf die console.log Funktion und dann untersucht die Struktur der Seite vor der </body> end-tag, und es war etwas mehr:

<div id="ui-tooltip-0" role="tooltip" class="ui-tooltip ui-widget ui-corner-all ui-widget-content" style="position: relative; top: -463.60003662109375px; left: 1px; display: block; opacity: 1;"><div class="ui-tooltip-content">Hello</div></div>

War es möglich, ändern Sie den QuickInfo-styling im Handumdrehen mit Inspector (getestet im Chrome).

InformationsquelleAutor camcam

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.