Abkürzung mouseover tooltip mit Erklärung

[Geoemyda]

Hallo,

ich suche einen MOD der zB jedes "MOD" in einem Beitragstext durch ein

Code: Alles auswählen

<a href="#" onmouseover="...." onmouseout="....">MOD</a>

ersetzt, so dass bei mouseover ein javascript tooltip erscheint, das erklärt was die Abkürzung "MOD" bedeutet.

Ich habe google bereits bemüht, aber lediglich Anfragen von anderen Menschen gefunden, die das gleiche suchen.

Ich hab außerdem versucht, diese Wortersetzung direkt in der mysql-Tabelle (phpbb_words) einzutragen. Das klappt auch so weit, dass im ACP die Wortersetzung richtig ist, aber bei der Erstellung von Beiträgen greift offenbar noch einmal ein Test ob der Nachrichtentext nur erlaubtes html beinhaltet und ein a-tag darf scheinbar nur href als Attribut enthalten.

Code: Alles auswählen

link:schön => <a href="http://www.schön.html">schön</a>

funktioniert noch, aber bereits

Code: Alles auswählen

link:schön => <a href="http://www.schön.html" title="sehr schön">schön</a> 

wird von phpbb ignoriert, auch wenn die Ersetzung im ACP noch auftaucht.

Gibt es so etwas oder hat jemand einen Tipp zur umsetzung?

[Talk19zehn]

Hello,

offenbar suchst du eine Art "Automatismus"?

http://www.phpbb.com/community/viewtopi ... 0&t=584656
http://www.kaninchenwissen.de/viewtopic ... t=43&#p496

Find ich gar nicht schlecht. Nur habe ich diese Modifikation noch nicht ausprobiert.

Ich hingegen gestalte einen Tooltip händisch und habe diese CSS-Notation übernommen:

Zitat online: 10.04.2011 http://psacake.com/web/jl.asp

a.info{
position:relative; /*this is the key*/
z-index:24; background-color:#ccc;
color:#000;
text-decoration:none}

a.info:hover{z-index:25; background-color:#ff0}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #0cf;
background-color:#cff; color:#000;
text-align: center}

und BBCodes angelegt.

BBCode-Benutzung

Code: Alles auswählen

[toolinfo={INTTEXT}]{TEXT}[/toolinfo]

HTML-Ersetzung

Code: Alles auswählen

<a title="{INTTEXT}" class="info" style="cursor: help;">{TEXT}</a>

Tipp-Anzeige

Code: Alles auswählen

toolinfo text: [toolinfo=text]text[/toolinfo]

Anwendung: Beispiel

... (...)...eine Vielzahl interessierter Personen der Auffassung, eine eigene Seite im World Wide Web auf eine [toolinfo=World Wide Web]Datenautobahn[/toolinfo] zu schicken. ...(...)...

Das Wort Datenautobahn wird in dem Beispiel mttels Tooltip mit World Wide Web "erklärt"...


Die andere Variante, die ich bevorzuge, da ein Bildchen einen Tooltip signalisiert:

CSS:

Zitat: Herkunft leider nicht mehr bekannt.

a.tool { border-bottom: 1px solid #b1a188; text-decoration: none; }
a.tool:hover { cursor: help; background: #b1a188; }
a.tool span { visibility: hidden; position: absolute; left: 22em; width: 26em; padding: 1em; text-decoration: none; }
a.tool:hover span { visibility: visible; border: 0px solid #b1a188; color: black; background: #CC9933; }

BBCode-Benutzung

Code: Alles auswählen

[Tooltip]{TEXT}[/Tooltip]

HTML-Ersetzung

Code: Alles auswählen

<a href="#" class="tool"><img style="width:16; height:14px;" src="images/Birnchenonyellow.gif" alt="" /><span>{TEXT}</span></a>

Tipp-Anzeige

Code: Alles auswählen

Tooltip: [tooltip]Deine Message[/tooltip]

Anwendung: Beispiel

...(...)... Eine einheitliche Auszeichnung scheint es nicht zu geben. Jedenfalls fand ich keine. Weder Grammy noch Oscar scheinen für die Browserwelten geeignet zu sein. Informationen sind vielseitig. Es wird über Hochkommata [tooltip]Hochgestelles Komma[/tooltip], Slash, Backslash,..(...)...

Hier signalisiert das Birnchenonyellow.gif einen Tooltip.

Anwendungsmuster oder Beispiele gibt´s ja wie Sand am Meer und sind nicht so einfach zu integrieren, finde ich so nebenbei und ganz persönlich.
BTW: Ich verwende keine Wortersetzungen, da ich damit teils Beträge "verstümmelte". Das machte wenig Sinn in meinen Augen. Es mag andere Erfahrungsberichte geben...

Viel Glück!