[phpBB2] Tooltip Problem

[Mukuro]

Guten Tag, ich bins mal wieder... :'D

Auch diesmal habe ich ein Problem, bei dem ich eure Hilfe brauche. Wie der Titel schon verrät, brauche ich Hilfe bei den Tooltips.
Nach einigen fehlgeschlagenen Selbstversuchen - die mich die ganze Nacht gekostet hatten - habe ich hier zwei Threads gefunden, in denen Günther schon anderen geholfen hat Tooltips zu erstellen.
https://hilfe.forumieren.com/t34111-charakteranzeige-durch-anvisieren-des-bildes
Nachdem ich den Anweisungen hier nachgegangen bin, habe ich das, was ich erreichen wollte, auch schon fast geschafft. Freies Indexmodul, zwei Bilder nebeneinander (damit es wie eines Wirkt) und je nach Bildseite ein anderes Tooltip auftaucht...etc. Nun habe ich 2 Probleme:
1. Die Tooltips erscheinen hinter dem Bild und dem div Element auf.
2. Ich blicke im CSS nicht so gut durch, weshalb sich das Gestalten des Tooltips schwer gestaltet. Farbe, Rahmen, Richtung in die der Tooltip immer zeigen soll...solche Dinge will ich unbedingt noch einstellen, bevor ich mich an den Inhalt mache.

Inzwischen habe ich mir diese Seite (http://www.opentip.org/documentation.html) schon oft durchgelesen und gedacht, dass ich es verstanden habe...aber scheinbar doch nicht, denn mit dem CSS den Günther im Thread zur Verfügung gestellt hat, komme ich nicht klar.

Kann mir einer sagen, was ich falsch mache und mir eine Richtung geben, wie ich den Style anpassen kann?

Danke im Voraus und tut mir Leid fürs ständige Nerven in letzter Zeit. Ich weiß, dass ich ein Noob bin in CSS und Co, aber ich versuche es zu verstehen... >.<''

Mit freundlichen Grüßen,

Mukuro

[Günther]

Hallo,

zuerst mal zur Sicherheit: Du weißt aber schon, dass Tooltips normalerweise einfach mit einem title-Attribut erstellt werden und gar kein Javascript oder CSS benötigen?
Diese JS-Tooltips sind nur dann benötigt, wenn man sich ein eleganteres Aussehen und weitere Gestaltungsmöglichkeiten wünscht. An sich wäre diese Umsetzung aber nicht unbedingt nötig.

1. Die Tooltips erscheinen hinter dem Bild und dem div Element auf.

Das kommt daher, dass du in diesem Modul mit vielen unnötigen Ebenen arbeitest, diesen unterschiedliche Ebenenwerte (z-index) etc. zuweist. Normalerweise positioniert das Tooltip-Script die Tooltips immer in der obersten Ebene, über dem gehoverten Element.
Versuche mal, dein Indexmodul etwas klarer zu strukturieren und zu bereinigen. Ganz schlicht, aber genauso wirkungsvoll könntest du denselben Effekt z.B. mit diesem Code erreichen:

Code:

<img src="http://i1119.photobucket.com/albums/k622/kyomutsu/human%20exitus/nao.png" data-ot="NAO THE PRINCE">
<img src="http://i1119.photobucket.com/albums/k622/kyomutsu/human%20exitus/kata.png" data-ot="KATASHI THE PRINCESS" style="margin-left: -6px;">

Wie du siehst, kommst du hier sogar vollständig ohne divs & Co aus, außerdem klappt damit der Tooltip-Effekt in meinem Testforum wunderbar.

2. Ich blicke im CSS nicht so gut durch, weshalb sich das Gestalten des Tooltips schwer gestaltet. Farbe, Rahmen, Richtung in die der Tooltip immer zeigen soll...solche Dinge will ich unbedingt noch einstellen, bevor ich mich an den Inhalt mache.

Im CSS des Tooltips solltest du dir vor allem diese Zuweisung ansehen:

Code:

.opentip-container .opentip {
  position: relative;
  font-size: 13px;
  line-height: 120%;
  padding: 9px 14px;
  color: #4f4b47;
  text-shadow: -1px -1px 0px rgba(255,255,255,0.2);
}

Dort kannst du den Inhalt (also insbesondere den Text) der Tooltips definieren.

Den Tooltip selbst musst du direkt im Javascript modifizieren, wie es hier beschrieben wird: http://www.opentip.org/documentation.html
Für die Hintergrundfarbe des Tooltips ist ein bestimmter Wert zuständig. Ich habe dir die umliegende Stelle des Scripts herausgesucht, damit du den Wert leichter finden kannst:

ajaxMethod:"GET",ajaxCache:!0,group:null,style:null,background:"#fff18f",backgroundGradientHorizontal:!1,closeButtonOffset:

Dort kannst du einen anderen Hexadezimalfarbwert einsetzen, absenden und du wirst sehen, dass sich die Hintergrundfarbe des Tooltips verändert.
Anhand der Dokumentation (Eigenschaft und Default-Wert) kannst du im Script die entsprechenden Werte finden und personalisieren. Dazu musst du aber konzentriert und genau arbeiten.

Ich hoffe, geholfen zu haben.

Liebe Grüße
Günther

[Mukuro]

Danke für die schnelle Antwort erst mal!
Ja, ich weiß, dass man Tooltips normalerweise einfach mit dem title-Attribut erstellt, habe mich da gestern die ganze Zeit mit beschäftigt. Aber diese JS-Tooltips sind genau das, was ich will. Am Ende soll da nämlich nicht nur Text drin stehen, sondern auch eine Grafik oder Links und auch das Aussehen will ich ja anpassen. Deswegen ist diese Umsetzung eben doch nötig.

Zu dem ersten Problem:
Ja, ich hab da schon einiges reingefummelt, nachdem der Code, wie du ihn mir hier gegeben hast, nicht so funktioniert hat, wie ich es wollte. Hatte den nämlich auch schon drin, ganz ohne Ebenenwerte. Habe das Ganze gerade noch mal eingefügt – wie von dir vorgeschlagen – und so sieht es dann aus:

Die Bilder sind untereinander und nicht nebeneinander, ergeben kein ganzes Bild mehr und auch das Tooltip funktioniert dennoch nicht richtig. Liegt das am Rest des Codes im Indexmoduls?

Zu dem Style: Okay, da lag schon mal mein erster, schwerer Fehler. Mir war nicht bewusst, dass das Aussehen des Tooltips selbst im Javascript definiert werden muss. Daran werde ich mich auf jeden Fall setzen, wenn das erste Problem behoben ist. Danke!

[Günther]

Die Bilder sind untereinander und nicht nebeneinander, ergeben kein ganzes Bild mehr und auch das Tooltip funktioniert dennoch nicht richtig. Liegt das am Rest des Codes im Indexmoduls?

Das liegt, wie gesagt, an all den verschiedenen Bereichen und Ebenen, die du etwas unstrukturiert gemeinsam verwendest.

Du musst aus dem Modul-einleitenden div folgenden Wert entfernen, damit sich keine Ebene mehr über den Tooltip legt:

<div style="width: 150px; padding-left: 10px; padding-right: 10px; background-image: url("https://2img.net/h/i1119.photobucket.com/albums/k622/kyomutsu/human%20exitus/5.png"); border-width: 1px; border-style: dotted; border-color: rgb(250, 152, 198); position: absolute; right: 50%; margin-right: -673px; top: 600px; z-index: 10000;">

Und weiter unten diesen Wert, damit die beiden Grafiken mit meinem schlichten Code auch direkt nebeneinander angezeigt werden:

<div style="font-size: 11px; text-shadow: 1px 1px rgb(0, 0, 0); line-height: 12px; font-family: Tahoma; padding: 2px;">

Du solltest dir unbedingt deinen gesamten Modulcode genauer ansehen und ihn neu aufbauen. Strukturiertes und funktionelles HTML sieht ein wenig anders aus.

Und noch ein Tipp: Wenn der Tooltip-Style überall gleich aussehen soll, musst du ihn wie oben erklärt direkt im Script anpassen. Soll nur ein einzelner Tooltip davon abweichen, kannst du die verschiedenen Eigenschaften aber auch direkt im Element als Attribut festlegen, wenn du den Präfix data-ot-... wählst. Für einen roten Hintergrund kannst du also z.B. folgendes Attribut ergänzen:

Code:

data-ot-background="#FF0000"

Das ist aber nur in Einzelfällen sinnvoll - generell solltest du die Styleveränderungen direkt im Script festlegen.

[Mukuro]

So, ich habe ein wenig "aufgeräumt"...Aber da ich da nicht so die Ahnung von habe, wird es für dich wahrscheinlich immer noch unstrukturiert sein. xD Macht ja nichts, es funktioniert ja jetzt!
Auch im javascript habe ich ein wenig rumgefummelt und das Aussehen ein wenig angepasst. Das sind echt viele Codes, dass ich froh bin, die Farben wenigstens eingestellt zu haben, ohne dass es explodiert ist. xD''
Vielen lieben Dank für die schnelle Hilfe und das Erklären, ich hoffe, dass ich bald sturkturiertere und funktionelle HTMLs erstellen kann, ohne ständig um Hilfe bitten zu müssen. u_u''

Zwei Fragen hätte ich noch...*räusper*
Kann man es einstellen, dass die Tooltips nur nach links "ausschlagen"...also nur nach links angezeigt werden?
Ist es bei diesen Toolkits irgendwie möglich Grafiken und Links als Inhalt mit einzubinden?
Ich hab schon gegoogelt, werde aber wirklich nicht schlau daraus und den Javascript Code will ich nicht weiter eigenmächtig und ohne Ahnung verändern, am Ende funktioniert noch gar nichts mehr...

[Günther]

Das sieht doch schon besser aus.
Du hast sicher erkannt, wie "schlank" man solche Codes gestalten kann.

Kann man es einstellen, dass die Tooltips nur nach links "ausschlagen"...also nur nach links angezeigt werden?

Auch das findest du in der Dokumentation. Suche diese Stelle:

tipJoint:"top left",target:null,targetJoint:null,ajax:!1,ajaxMethod:"GET",ajaxCache:!0,group:null,

Dort kannst du den Bezugspunkt des Tooltips auf "top right" ändern, wodurch der Tooltip von rechts-oben nach links hin "ausschlägt".

Ist es bei diesen Toolkits irgendwie möglich Grafiken und Links als Inhalt mit einzubinden?

Du kannst in das Attribut data-ot auch weitere Elemente einsetzen. Dabei musst du nur darauf achten, dass du innerhalb des Elementes statt der doppelten nur einfache Anführungszeichen verwendest, damit das Tooltip-Attribut nicht versehentlich geschlossen wird. Dann sieht dann z.B. so aus:

<img src="GEHOVERTE GRAFIK" data-ot="<img src='TOOLTIP-GRAFIK'>">

Mit diesen Infos kannst du selbst einiges erreichen, denke ich. Ist das hier dann erledigt?

[Mukuro]

Ja, das habe ich in der Tat gemerkt...Muss mir das nur angewöhnen. xD''

Es hat alles wunderbar geklappt, nach hin und her ausprobieren.

Eigentlich wäre das Ganze damit auch erledigt, hätte ich nicht nun auch den Versuch gestartet gewisse Teile des Profils beim hovern über den Avatar anzeigenn zu lassen. Um genauer zu sein den Teil, den ich selbst hinzugefügt habe und "Charakter Info" genannt habe.
https://hilfe.forumieren.com/t34202-avatar-tooltip?highlight=tooltip
Ich hab das befolgt und wie derjenige, der um Hilfe gebeten hat, habe ich nun auch ein kleines, leeres Tooltip.

Das Schema sollte dir klar sein:

<div data-ot='{postrow.displayed.POSTER_RPG}'>{postrow.displayed.POSTER_AVATAR}</div>

In diesem Fall wird die Variable {postrow.displayed.POSTER_RPG} als Tooltip angezeigt, wenn die Variable {postrow.displayed.POSTER_AVATAR} gehovert wird.

Wenn du meiner Anleitung folgst, werden die Charakterfelder als Tooltip angezeigt. Falls du aber andere Variablen als Tooltip-Inhalt eingesetzt hast und nun ein leerer Tooltip angezeigt wird, dann ist das der Fall:

Du wirst feststellen, dass sich nicht sämtliche Variablen als Tooltip-Inhalt verwenden lassen. Das kommt daher, dass einige Variablen bereits Vorformatierungen beinhalten und dieser HTML-Code dann teilweise den Tooltip-Tag stört bzw. aufhebt. Aber bei den Charakterfeldern ist das z.B. nicht der Fall und du kannst die entsprechende Variable problemlos als Tooltip-Inhalt einsetzen.

Es ist mir klar, das erste. Die zweite Sache aber nicht ganz...Eigentlich, überhaupt nicht.

Ich möchte, wie in deinem kleinen Screenshot aus dem anderen Thread als Beispiel von deinem Forum zu sehen, die anzeige "Charakter Info" und darunter eine Box, mit vorgeschriebenen Eigenschaften wie "Inventar", welche die User jedoch entweder bei Profil, am besten aber gleich im Tooltip aktuallisieren können sollen. Natürlich nur bei ihren eigenen Charakteren.

Tut mir wirklich leid, dass ich so viel deiner Zeit und Mühe in Anspruch nehme, Günther. u_u''

[Günther]

Wenn du nach meiner Anleitung im verlinkten Thread vorgehst, werden die Charakterfelder aus dem Profil im Tooltip angezeigt. Falls dir nicht ganz klar ist, wie du dazu kommst, sieh in der Lexi Help unter R bei "RPG-Anleitung und Würfel" nach.
Du kannst nur bereits bestehende Variablen aus dem Template in ein Tooltip einsetzen, um userbezogene Daten anzuzeigen. Es ist aufgrund des fehlenden Datenbankzugriffs nicht möglich, weitere Felder zu ergänzen (noch dazu mit Live-Aktualisierung). Außerdem wirst du, wie ich im zitierten Bereich erklärt habe, feststellen, dass manche Variablen als Tooltip-Inhalt nicht geeignet sind, weil deren HTML-Vorformatierung damit unvereinbar ist.

Kurz gesagt: Du kannst nur vorhandenen Variablen einsetzen, wenn es sich um userbezogene Daten handeln soll. Weitere hinzufügen kannst du nicht und es sind auch nicht sämtliche Variablen dafür geeignet.

[Mukuro]

Alles klar, das habe ich jetzt verstanden. *Trottel* e.e'

Vielen Dank noch mal für die enorme Hilfe!
Jetzt bin ich fertig. u_u

Einen schönen Abend noch!

[Günther]

Freut mich, dass ich dir helfen konnte. Gerne.

Danke, dir ebenfalls noch einen schönen Abend.
-done-