Tooltip einfügen

  • Hallo,

    ich habe eine Seite, auf der ich eine Box habe, die als Template deklariert ist. In dieser Box befindet sich der folgende Inhalt:

    Code
    <ul class="buttonGroup">
    <li><a href="{link controller='BoardList' application='wbb'}{/link}" class="button buttonPrimary">Forum</a></li>
    <li><a href="{link controller='Lexicon' application='lexicon'}{/link}" class="button">Lexikon</a></li>
    <li><a href="#" class="button">Mehr Informationen</a></li>
    </ul>

    Der erste Button verlinkt auf die Foren-Übersicht, der zweite auf die Lexikon-Startseite, für den dritten habe ich momentan noch keine Verwendung, er ist momentan nur ein Platzhalte,r für später z. B. EasyMedia oder die WoltLab Gallery.

    Ich würde gerne, wenn man mit dem Mauszeiger über die einzelnen Buttons fährt, ein Tooltip einblenden, in dem ich mit ein paar Worten beschreibe, was sich im Bereich hinter dem Button versteckt. Also z. B.:

    Im Forum kannst du mit anderen Nutzern über viele verschiedene Themen diskutieren.

    Das Lexikon enthält objektiv aufgearbeitete Informationen sinnvoll gegliedert.

    Ich habe mit Tooltips noch nie gearbeitet und auch sonst nur wenig Erfahrung mit JS, kann mir jemand bei diesem Vorhaben helfen? In der doch noch recht neuen Dokumentation konnte ich dazu leider keine Hilfestellung finden.

    Grüße,

    jacboy

  • Ist recht einfach. Man benötigt nur eine Klasse jsTooltip und ein titleAttribut

    Bsp.:

    Code
    <a href="{link controller='BoardList' application='wbb'}{/link}" class="button buttonPrimary jsTooltip" title="Hier ist der Tooltip Inhalt">Forum</a>
  • Danke für die Info. Das funktioniert jetzt allerdings so nicht mehr... ?(

    Code
    <ul class="buttonGroup">
    <li><a href="{link controller='BoardList' application='wbb'}{/link}" class="button buttonPrimary data-tooltip" title="Im Forum kannst du mit anderen Nutzern über viele verschiedene Themen diskutieren.">Forum</a></li>
    <li><a href="{link controller='Lexicon' application='lexicon'}{/link}" class="button data-tooltip" title="Das Lexikon enthält objektiv aufgearbeitete Informationen sinnvoll gegliedert.">Lexikon</a></li>
    <li><a href="#" class="button">Mehr Informationen</a></li>
    </ul>
  • Ich habe das jetzt einfach mal so gelassen, wie es von Sonnenspeer vorgeschlagen wurde. Das funktioniert so und eigentlich ist das egal ob das "die alte Methode" oder sonst was ist....solange es funktioniert, ist es okay, eine nicht funktionierende Methode bringt mir nichts ^^

  • Ich hab das mal nach dieser Seite hier gemacht. https://pixelbar.be/blog/css-profi-tip-tooltip-attributen/

    In wie weit das richtig ist kann ich dir nicht sagen ich mache sowas immer nach dem try und error Prinzip. ^^

  • Ich greife das ganze hier noch mal auf und wollte nachfragen wie man den Abstand von diesem Tooltip bestimmen kann? Derzeit habe ich 2 Buttons mit einem Tooltip versehen. Und beide Tooltips sind eher im Button als darüber oder darunter. Weswegen ich mal fragen wollte wie man ein Tooltip weiter oben platzieren kann und auch nach unten.

  • Du könntest den beiden <a> eine CSS Klasse geben und dann via CSS display:block hinzufügen. Dann wäre der Tooltip über den Buttons. Alternativ kannst du das display: block auch via Inline-CSS direkt in das HTML mit rein schreiben, wenn dir das lieber ist.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!