PatternLab (1.0.11)

Appearance

Tooltip TBD ​

Tooltips are small, interactive, textual hints for mainly graphical elements. When used correctly, they can provide a useful and unobtrusive extra layer of information.

Best practices for tooltips
  • Keep the content short and concise and avoid using tooltips for critical information or actions
  • Use tooltips for icons, buttons, or other elements that might not be immediately clear to the user
  • Make sure the trigger element is large enough to be easily hoverable or tabbable
How to make accessible tooltips
  • Add tabindex="0" to make a non-interactive HTML element focusable (divs or spans are not focusable by default). Or even better: Use only Buttons as trigger elements.
  • Add role="tooltip" to the element that serves as the tooltip container.
  • Connect the tooltip with its trigger. Add aria-describedby to the element that triggers the tooltip and have it reference the ID of the tooltip.

    Development TODOs:
  • ✅ Tooltips must be able to be triggered by the keyboard alone.
  • ✅ Focus-visible styles should be applied to the tooltip trigger.
  • ✅ The tooltip shouldn’t receive focus.
  • ❌ The tooltip should close with the Escape key.

CSS-Tooltip ​

.c-tooltip__trigger > .c-tooltip

WARNING

With the CSS solution, links cannot be used as "c-tooltip__trigger": Links cannot be nested, which means: An A-Element cannot contain another A-Element.

Best practice is to use a button or a span with a tabindex="0" as trigger element.

Show Code
html
<div class="c-tooltip__trigger h-inline-block" aria-describedby="example-css-tooltip">
  <button type="button" class="c-btn -small -inverted -icon-left">
    <i class="far fa-info-circle" aria-hidden="true"></i> Open CSS-Tooltip
  </button>
  <div class="c-tooltip" role="tooltip" id="example-css-tooltip">
    <strong>Lorem ipsum</strong> dolor sit amet,
    consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>
</div>

.-has-tooltip adds the default color and hover-color of links to an icon (without any js-functionality). TODO

Size Modifiers ​

TIP

The size of the tooltip is determined by the content. However, you can manually adjust the min-width and padding of the tooltip by adding one of the following classes to the tooltip container .c-tooltip: .-large, .-extra-large

.c-tooltip.-large

Show Code
html
<div class="c-tooltip__trigger">
  <button type="button" class="c-link -icon-left" aria-describedby="example-large-tooltip">
    <i class="far fa-info-circle" aria-hidden="true"></i> Open Large CSS-Tooltip
  </button>
  <div class="c-tooltip -large" role="tooltip" id="example-large-tooltip">
    <h4>Fit fürs Examen mit unseren Prüfungstrainern!</h4>
    <ul class="c-list -unordered">
      <li>Kommentare Software auf Keine-Bange.de für das 1. Staatsexamen</li>
      <li>Karteikartentrainer mit über 1500 Fragen für das 2. Staatsexamen</li>
      <li>Karteikartentrainer für das 3. Staatsexamen mit über 600 Fragen in den Fächern Recht und Praxis</li>
    </ul>
    <div class="h-type-align-center">
      <a href="/studenten/pruefungstrainer/" class="c-btn -light m-t-m -small -icon-right -icon-arrow">mehr Informationen</a>
    </div>
  </div>
</div>

.c-tooltip.-extra-large

Open Extra-Large CSS-Tooltip
Show Code
html
<div class="h-block h-text-align-right">
  <div class="c-tooltip__trigger">
    <a class="c-link -icon-left" aria-describedby="example-extra-large-tooltip">
      <i class="far fa-info-circle" aria-hidden="true"></i> Open Extra-Large CSS-Tooltip
    </a>
    <div class="c-tooltip -extra-large" role="tooltip" id="example-extra-large-tooltip">
      <h3 class="h3 c-headline">Wie und wo verwende ich den QR-Code?</h3>
      <p class="-redesign">Der QR-Code enthält die interne Chargenbezeichnung eines Stoffes.</p>
      <div class="h-flex h-flex-row h-align-center m-t-m">
        <div class="c-pill -primary -small  m-r-m"><i aria-hidden="true" class="far fa-mouse-pointer"></i></div> Im Herstellungsprotokoll mit dem Mauszeiger in das Feld "Charge/Prüfnummer" klicken.
      </div>
      <div class="h-flex h-flex-row h-align-center m-y-s">
        <div class="c-pill -primary -small  m-r-m"><i aria-hidden="true" class="far fa-qrcode"></i></div> Den QR-Code mit einem Scanner einlesen.
      </div>
      <div class="h-flex h-flex-row h-align-center">
        <div class="c-pill -primary -small  m-r-m"><i aria-hidden="true" class="far fa-check"></i></div> Die interne Chargenbezeichnung aus dem QR-Code wird in das Feld eingefügt.
      </div>
      <div class="h-flex h-flex-row h-align-center m-y-s">
        <div class="c-pill -primary -small  m-r-m"><i aria-hidden="true" class="fa fa-language"></i></div> Die Sprache Ihres Scanners muss auf Deutsch eingestellt sein. Bitte folgen Sie hierfür den Anweisungen des Handbuchs.
      </div>
    </div>
  </div>
</div>

Directions ​

Tooltip opens on the left ​

.c-tooltip__trigger.-open-left

Show Code
html
<div class="h-type-align-right">
  <button type="button" class="c-tooltip__trigger -open-left" aria-describedby="example-left-tooltip">
    <i class="far fa-info-circle -has-tooltip" id="left-tooltip-trigger" tabindex="0"></i>
    <div class="c-tooltip" role="tooltip" id="example-left-tooltip">
      <strong>Lorem ipsum</strong> dolor sit amet,
      consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </div>
  </button>
</div>

Tooltip opens on the top ​

.c-tooltip__trigger.-open-top

Show Code
html
<button type="button" class="c-tooltip__trigger -open-top">
  <i class="fa fa-heart h-link-color" aria-describedby="example-top-tooltip" tabindex="0"></i>
  <div class="c-tooltip" id="example-top-tooltip" role="tooltip">
    <strong>Lorem ipsum</strong> dolor sit amet,
    consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>
</button>

Tooltip on a button ​

.c-tooltip__trigger.-btn

Show Code
html
<div class="h-width-20 h-flex h-flex-row h-end">
  <div class="c-tooltip__trigger -open-left -btn">
    <button type="button" class="c-btn -icon-btn -small -inverted" aria-describedby="example-btn-tooltip">
      <i class="fa fa-trash" aria-hidden="true"></i>
      <span class="h-sr-only">
                Rührvorgang entfernen
            </span>
    </button>
    <div class="c-tooltip" role="tooltip" id="example-btn-tooltip">
      Rührvorgang entfernen
    </div>
  </div>
</div>

Tooltip is always visible ​

.c-tooltip__trigger.-is-visible

Show Code
html
<div>
  <button type="button" class="c-tooltip__trigger -is-visible" aria-describedby="example-visible-tooltip">
    <i class="far fa-2x fa-info-circle -has-tooltip"></i>
    <div class="c-tooltip" role="tooltip" id="example-visible-tooltip">
      <strong>Lorem ipsum</strong> dolor sit amet,
      consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </div>
  </button>
</div>

Tooltip States / Color Schemes ​

Add one of the following classes to the tooltip trigger element for different colors:

.c-tooltip[.-success, .-warning, .-error]

Show Code
html
<div class="h-flex h-equal-sizing">
  <div class="c-tooltip__trigger" tabindex="0">
    <i class="fa fa-info-circle h-color-success-dark" aria-hidden="true"></i>
    <div class="c-tooltip -success" role="tooltip">
      <strong>Lorem ipsum</strong> dolor sit amet,
      consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </div>
  </div>
  <div class="c-tooltip__trigger" tabindex="0">
    <i class="fa fa-info-circle h-color-warning-dark" aria-hidden="true"></i>
    <div class="c-tooltip -warning" role="tooltip">
      <strong>Lorem ipsum</strong> dolor sit amet,
      consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </div>
  </div>
  <div class="c-tooltip__trigger" tabindex="0">
    <i class="fa fa-info-circle h-color-error-dark" aria-hidden="true"></i>
    <div class="c-tooltip -error" role="tooltip">
      <strong>Lorem ipsum</strong> dolor sit amet,
      consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </div>
  </div>
</div>

JS-Tooltip (QTip2) ​

TIP

Based on the library QTip.

  • Use the class .js-tooltip for the trigger-element and use the attribute title or preferably data-title for setting the tooltip content.
    • For content text either use the attribute tooltip-desc or for HTML-content, add a sibling <div class="c-tooltip__content"> ... some HTML content ... </div> after the trigger-element.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Link-Demo
Show Code
html
<button type="button" class="c-link js-tooltip h-block m-y-m" data-title="I'm a magnificent tooltip.">
    <span class="fa fa-info-circle -has-tooltip" aria-hidden="true"></span> JS-Tooltip with data-title-attribute
</button>
<button type="button" class="c-link js-tooltip h-block m-y-m" data-title="I'm a magnificent tooltip." tooltip-desc="Lorem ipsum dolor sit amet">
    <span class="fa fa-info-circle -has-tooltip" aria-hidden="true"></span> JS-Tooltip with data-title and tooltip-desc-attribute
</button>
<button type="button" class="c-link js-tooltip h-block m-y-m">
    <span class="fa fa-info-circle -has-tooltip" aria-hidden="true"></span> JS-Tooltip with HTML content in extra Div
</button>
<div class="c-tooltip__content">
  Lorem ipsum dolor sit amet,
  consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br/>
  <a href="#" class="c-link -icon-arrow -icon-right">Link-Demo</a>
</div>

Tooltip Directions ​

TIP

The Tooltips opens either on the left or the right side of the trigger element, depending on the available space.

Set the attribute data-placement="right", data-placement="left", data-placement="top" or data-placement="bottom" to change the tooltip direction.

The default placement is right.

The Tooltip opens either on the left or the right side of the trigger element, depending on the available space determined by viewport.

Set the attribute data-position="[viewport] [adjust.x] [adjust.y]"

The default position is body shift none.

For more see QTip - viewport

Tooltip States / Color Schemes ​

TIP

Add one of the following classes to the tooltip trigger element via the attribute data-additional-tooltip-classes=".." for different colors:

  • Success / Green: .qtip-green, or .rb-klasse-0 or .rb-klasse-1
  • Warning / Orange: .qtip-orange or .rb-klasse-2
  • Error / Red: .qtip-red or .rb-klasse-3

data-additional-tooltip-classes="qtip-green"

Settings and API ​

Show Qtip Settings and API

Initialize the QTip-Library with or without Custom Settings:
Tooltip.init(settings: object);

Remove all Tooltips:
Tooltip.remove();

Hide all Tooltips:
Tooltip.hide();

2025 - Pharma4u