Tooltips

Tooltips werden genutzt, um textliche Zusatzinformationen zu einem Element anzuzeigen. Sie werden bei Mouseover oder Tab bzw. auf Mobilen Devices via Touch eingeblendet. Die Zusatzinformationen sollten kurz und bündig gehalten werden. Tooltips können wahlweise von jeder Seite eingeblendet werden.

Tooltips

Enthalten nur kurze textliche Zusatzinformationen.

Abmessungen
  • Innenabstand 8px/16px
  • Roboto 12px Medium #fff
  • Schatten 0 0px 20px rgba(0, 0, 0, 0.2)
  • Border radius 2px
  • Transparenz 95%
  • Hintergrund #212529
  • Motion 0.3s
  • Maximalbreite 200px

Elemente

Das auslösende Element ist nicht reglementiert.
Tooltips können z.B direkt aus einem Text, Bild oder wahlweise über ein Button Element ausgelöst werden.

Position

Benötigt die Popper.js library zur positionierung. Die popper.min.js muss vor der linkui.js eingebunden werden.


    //Text
    Text

    //Buttons


Javascript

Tooltips müssen global initialisiert werden.


    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })