[FRAGE] tooltipster-Problem auf Mobilgeräten

[glupto]

Hallo, ich habe für die tooltip-Gestaltung "tooltipster" in meine Seite integriert, und alles läuft auch gut, nur auf mobilen Geräten wie meinem ipad wird beim klicken auf einen Link nicht nur der tooltip wie gewünscht geöffnet, sondern auch noch das "öffnen/in anderem Fenster öffnen usw." geöffnet. Wie kann man das verhindern, so dass beispielsweise erst bei längerem "touch" der Link sich öffnet oder erst beim zweiten berühren, so dass man erst einmal den tooltipp lesen kann. Viele Optionen kenne ich ja beim tooltipster, aber keine Möglichkeit, dies einzustellen.

Freundliche Grüße
glupto

 

[kkapsner]

Soweit ich das auf der Projektseite sehe, unterstützen die eigentlich touch-Devices - hast du einen Testlink, wo wir uns deine Einbindung mal ansehen können?

 

[glupto]

Soweit ich das auf der Projektseite sehe, unterstützen die eigentlich touch-Devices - hast du einen Testlink, wo wir uns deine Einbindung mal ansehen können?

ja, die unterstützen touch-devices. Dort erscheint ja auch der tooltip(ster), nur eben z. B. beim ipad auch das "Kontextmenü" "Öffnen in neuem Tab usw", das sonst eben auch bei links erscheint und das würde ich gern deaktivieren, wenn das geht, denn es schiebt sich immer VOR den tooltip und muss durch erneutes tippen auf den tooltip zum Verschwinden gebracht werden. Hier der Code, in dem das touch-device-Management überhaupt festgelegt wird.

        $(document).ready(function() {
            $('.tooltip').tooltipster({
   animation: 'grow',
   delay: 800,
   theme: 'tooltipster-default',
   touchDevices: true,
   trigger: 'hover',
   followMouse: true
});
        });

Hier die Testseite:
Nachrichtentisch

Gruß glupto

 

[kkapsner]

Ach so... dann klingt mir das aber nach einem Bug in dem Tooltipster, den du denen mitteilen solltest, damit der dort zentral gelöst werden kann.

PS: Ich finde auf deiner Seite irgendwie keinen Link, der auch einen Tooltip hat...

 

[glupto]

Ach so... dann klingt mir das aber nach einem Bug in dem Tooltipster, den du denen mitteilen solltest, damit der dort zentral gelöst werden kann.

PS: Ich finde auf deiner Seite irgendwie keinen Link, der auch einen Tooltip hat...

Alle mehr als 100 Links auf der Seite haben einen tooltip, in welchem browser/mobilgerät guckst du?

 

[kkapsner]

Ah... von einem Tooltip erwarte ich, dass er sehr schnell kommt und ich nicht erst eine Sekunde warten muss, bis er erscheint...

EDIT: Hab' das gerade auf einem Touch-Device ausprobiert - die Seite ist für mich kaum benutzbar...

 

[glupto]

Könntest Du das genauer benennen, wieso sie "kaum benutzbar" ist? - ist ja ein recht pauschales Urteil, das mir so nicht weiterhilft.

Dass der tooltip nicht sofort kommt hat den Grund, dass Du ansonsten beim Drüberfahren mit der Maus ein irres Geflacker hättest. Also wenn man mit der Maus an eine bestimmte Stelle will, soll nicht dauernd zwischendurch etwas "aufpoppen" auf dem Weg dahin, ist ja nun mal eine Seite mit sehr vielen feed-links. Im Übrigen kann man den "fade"-Wert ja ändern.

(Im übrigen ist es ein sehr spezielle Seite - vor allem für Nachrichtenredakteure gedacht).

 

[kkapsner]

Oh - tut mir leid, dass ich nicht spezifischer war... dachte, dass dir das schon aufgefallen ist.

Also wenn ich einen Tooltip aufgemacht habe, bekam' ich den nicht mehr weg. Genauso wie das Seitenmenü. Das Verhalten der Seite war für mich einfach nicht wirklich nachvollziehbar (außerdem wollte der Browser dann manchmal plötzlich irgendwelchen Text markieren, anstatt den Link zu öffnen oder den Tooltip aufzumachen). Aber ich bin das auch nicht wirklich gewohnt, da ich solche Geräte normalerweise nicht benutze.

Das ständige "aufpoppen" ist das andere Extrem. Ich würde die Wartezeit einfach etwas runtersetzten (so auf eine halbe Sekunde...).

 

[j-l-n]

Also wenn ich einen Tooltip aufgemacht habe, bekam' ich den nicht mehr weg. Genauso wie das Seitenmenü. Das Verhalten der Seite war für mich einfach nicht wirklich nachvollziehbar (außerdem wollte der Browser dann manchmal plötzlich irgendwelchen Text markieren, anstatt den Link zu öffnen oder den Tooltip aufzumachen).

Also ich täte es so machen, dass beim Klick auf den Link das gleich aufpoppt. Denn von Android weiß ich, dass dort z.B. Drag&Drop nicht möglich ist, da beim längeren Gedruckt halten eines Elements immer das Browsermenü mit Optionen wie "in neuem Tab öffnen" usw. erscheint...

 

[glupto]

Habe es jetzt hinbekommen, dass der Link im tooltip steht, allerdings besteht das Problem, dass ich es nicht hinbekomme, dass man den tooltip dann manuell z. B. per "Schließ-Kreuz" wieder zumacht. Denn obwohl autoclose ja standardmäßig auf 'true' steht, schließt der tooltip manchmal ja, manchmal nein. Auf der tooltipster-Seite ist ja sowas vorgesehen, allerdings erkenne ich in den dort dargestellten Options nicht, wie das genau geht, da ich mich mit js nicht so genau auskenne (weswegen ich ja ein fertiges plugin genommen habe). Also falls jemand eine Idee hat. Hier mein eigener Versuch, von der tooltipster-Seite übernommen, aber ich habe den Verdacht, dass ich 'example' durch etwas ersetzen müsste, aber durch was? ABgesehen bräuchte ich ja erstmal am tooltip ein "Schließkreuz-icon":

        $(document).ready(function() {
            $('.tooltip').tooltipster({
   contentAsHTML: true,
   autoclose: true,
   animation: 'grow',
   delay: 400,
   theme: 'tooltipster-default',
   touchDevices: true,
   trigger: 'click',
   interactive: true ,
   timer: '15'
});
 $(window).keypress(function() {
      $('#example').tooltipster('hide');
   });
});

Zur Sicherheit noch mal die Seite:testseite

Gruß und Dank
glupto

 

[kkapsner]

Jetzt sehe ich wirklich keine Tooltips mehr...

...auch finde ich auf der Tooltipster-Seite kein Beispiel mit einem "Schließkreuz".

 

[glupto]

Jetzt sehe ich wirklich keine Tooltips mehr...

...auch finde ich auf der Tooltipster-Seite kein Beispiel mit einem "Schließkreuz".

Tooltips sieht man jetzt nur, wenn man auf die Schlagzeile klickt, (was man aber wohl auch nicht registriert, da nur ein Text-Cursor-Symbol zu sehen ist, und keine "Link-Hand") die tooltips schließen sich dann nach 10 Sekunden (habe ich eingestellt.) Ich möchte aber, dass sie sich vorher auch schließen, wenn man woanders hinklickt (ob nun Schließkreuz oder press-any-key...". Und sehr gut wäre es natürlich auch, wenn ein CUrsor-Symbol anzeigte, dass sich da ein tooltip verbirgt...Am liebsten würde ich ja insgesamt hover als trigger benutzen, aber, dann bleibt der tooltip nicht stehen und das soll er erstmal, damit man mit dem Cursor reingehen und markieren kann.

Hast Du eine Idee, wie das zu realisieren ist?

Ja, mit dem Schließkreuz bei tooltipster, da habe war wohl der Wunsch der Vater der Porzellankiste.

 

[j-l-n]

Und sehr gut wäre es natürlich auch, wenn ein CUrsor-Symbol anzeigte, dass sich da ein tooltip verbirgt...

Wenn beim Drüberfahren mit dem Mauszeiger sich dieser wie bei einem Link verhalten soll, machat du das mit CSS:

cursor: pointer;

Generell find ich das mit den Tooltips in der aktuellen Version von einem Touch-Device aus recht gut bedienbar.
Dafür ist aber die Seite ansonsten ziemlich schlecht angepasst - bei mir (neueste Android- und Chrome-Version) ist beispielsweise sämtlicher Text etwa in der Hälfte der Seite abgeschnitten und verrutscht...

 

[glupto]

Wenn beim Drüberfahren mit dem Mauszeiger sich dieser wie bei einem Link verhalten soll, machat du das mit CSS:

cursor: pointer;

Generell find ich das mit den Tooltips in der aktuellen Version von einem Touch-Device aus recht gut bedienbar.
Dafür ist aber die Seite ansonsten ziemlich schlecht angepasst - bei mir (neueste Android- und Chrome-Version) ist beispielsweise sämtlicher Text etwa in der Hälfte der Seite abgeschnitten und verrutscht...

Danke für den Hinweis. Aber weißt Du, wie man es macht, dass der tooltip sich auch vor Ablauf der automatischen Schließ-Zeit durch einen Klick oder so schließen lässt.

Mit den Media-Queries und sonstigen Anpassungen bin ich noch nicht fertig, auch noch nicht ganz mit der Navi. Andererseits sieht auf meinem Samsung ace II alles von der Breite her ganz okay aus. Was für eine Smartphone hast Du denn und wo treten die "Beschneidungen" auf, im portrait- oder im landscape-modus (oder in beiden)? Ich teste ja alles immer mit dem responsinator.

Gruß pto

 

[j-l-n]

weißt Du, wie man es macht, dass der tooltip sich auch vor Ablauf der automatischen Schließ-Zeit durch einen Klick oder so schließen lässt.

Ja, ich tippe einfach nochmal auf die Überschrift, dann schließt sich der jeweilige Tooltip wieder.

Was für eine Smartphone hast Du denn und wo treten die "Beschneidungen" auf, im portrait- oder im landscape-modus (oder in beiden)?

Treten in beiden Orientierungen auf...

App: Chrome 33.0.1750.166 1750166
Betriebssystem: Android 4.4.2; Nexus 5 Build/KOT49H

 

[glupto]

Treten die Fehler denn bei der Überschrift auf oder beim gesamttext der schlagzeilen? (Wenn Du einen Screenshot hättest...?) Das Problem ist, dass ich im Moment bei responsinator nur beim Seitennamen (navbar-brand) Fehler sehe.

 

[j-l-n]

Treten die Fehler denn bei der Überschrift auf oder beim gesamttext der schlagzeilen? (Wenn Du einen Screenshot hättest...?)

Sowohl als auch:

 

[kkapsner]

Ich bin ja der Meinung, dass sowas wie eine Lightbox oder ein "more"-Button, der dann einen Textabschnitt erscheinen lässt, besser benutzbar wären als ein Tooltip.