Tooltip einfügen

JayOnRails · Feb 6th 2017

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

Sonnenspeer · Feb 6th 2017

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>

JayOnRails · Feb 6th 2017

Perfekt, danke. Ich dachte nicht, dass das so einfach ist

Black Rider · Feb 6th 2017

Das ist die alte Methode von Community Framework 2 und sollte nicht mehr verwendet werden.

Einfach ein data-tooltip-Attribut nutzen.

JayOnRails · Feb 6th 2017

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>

Morik · Feb 6th 2017

Black Rider : Wie kommst du darauf ?

https://github.com/WoltLab/WCF…te/Core/Ui/Tooltip.js#L61

hat sich doch nichts geändert an der Handhabung oder übersehe ich etwas ?

JayOnRails · Feb 6th 2017

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

SwPotsdam · Feb 7th 2017

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

Code

<style>
    a.tooltip {
    position: relative;
    text-decoration: none;
  }
  a.tooltip:after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 130%;
    left: 20%;
    background: #ffcb66;
    padding: 5px 15px;
    color: black;
    -webkit-border-radius: 10px;
    -moz-border-radius   : 10px;
    border-radius        : 10px;
    white-space: nowrap;
    opacity: 0;
     /* At time of this creation, only Fx4 doing pseduo transitions */
    -webkit-transition: all 0.4s ease;
    -moz-transition   : all 0.4s ease;
  }
  a.tooltip:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 20px solid #ffcb66;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    /* At time of this creation, only Fx4 doing pseduo transitions */
    -webkit-transition: all 0.4s ease;
    -moz-transition   : all 0.4s ease;
    opacity: 0;
    left: 30%;
    bottom: 90%;
  }
  a.tooltip:hover:after {
    bottom: 100%;
  }
  a.tooltip:hover:before {
    bottom: 70%;
  }
  a.tooltip:hover:after, a:hover:before {
    opacity: 1;
  }
</style>

<ul class="buttonGroup">
<li><a href="{link controller='BoardList' application='wbb'}{/link}" class="button buttonPrimary tooltip" data-tooltip="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 tooltip" data-tooltip="Das Lexikon enthält objektiv aufgearbeitete Informationen sinnvoll gegliedert.">Lexikon</a></li>
<li><a href="#" class="button">Mehr Informationen</a></li>
</ul>

Display More

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

JunkiePsycho · Jul 25th 2017

Sorry für die nochmalige Aufnahme nach der langen Zeit...

Eine Verwendung von HTML Code innerhalb des Tooltips wie von Sonnenspeer beschrieben ist nicht möglich, oder?

Canna · Jul 26th 2017

Soweit mir bekannt ist Nein

Creed Design · Aug 2nd 2017

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.

norse · Aug 2nd 2017

Wo kann man sich das ansehen?

Gruß norse

Creed Design · Aug 2nd 2017

http://forum.pulse-network.de/forum/ Rechts ist das eine Box mit 2 Button die einmal zum Teamspeak führen und auf eine Homepage. Und diese Tooltips, wenn man schaut, finde ich noch nicht perfekt positioniert sind.

ReeN · Aug 2nd 2017

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.

Creed Design · Aug 3rd 2017

Jetzt würde ich gerne noch für den zweiten Button (Teamspeak) das Tooltip unten anzeigen lassen. Das funktioniert dann mit margin-bottom oder wie?

Tooltip einfügen

Participate now!

Share

Similar Threads

Items per BBCode einfügen

Templatevariablen mit Listener javascriptInit@wysiwyg verwenden

Patch Day 01.06.2016

Tags