PatternLab (0.1.505)

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.

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