PatternLab Vite (1.8.12)

Appearance

Tooltip ​

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.

JS-Tooltip new ​

TIP

Use the class .js-tooltip for the trigger-element and use the attribute title or data-title for setting the tooltip content.

See TooltipManager for more information. (QTip library is deprecated.)

I'm a magnificent tooltip.
I'm a magnificent tooltip.
html
<span>
    <i class="far fa-info-circle fa-2x js-tooltip" data-placement="right" data-title="Lorem Ipsum"></i>
    <span class="h-sr-only">Open Tooltip</span>
</span>
<span class="p-l-l">
    <i class="far fa-2x fa-external-link -has-tooltip" aria-hidden="true"></i>
    <span class="h-sr-only">Open Tooltip</span>
</span>

Tooltip Direction ​

TIP

Set the attribute data-placement="right" or data-placement="left"

Placement values

js
// Basic
['top', 'right', 'bottom', 'left']

// y -> x
['top-start', 'top-end', 'bottom-start', 'bottom-end']

// x -> y
['right-start', 'right-end', 'left-start', 'left-end']
Show Code
html
<div class="h-pos-relative">
    <label class="c-label js-tooltip m-r-xxl" tabindex="0" data-placement="right" data-title="I'm a magnificent tooltip.">
        Open Tooltip on the right
        <span class="fa fa-info-circle -has-tooltip" aria-hidden="true"></span>
    </label>
    <label class="c-label js-tooltip" tabindex="0" data-placement="left" data-title="I'm a magnificent tooltip.">
        <span class="fa fa-info-circle -has-tooltip" aria-hidden="true"></span>
        Open Tooltip on the left
    </label>
</div>

Open Tooltip via ID new ​

TIP

A tooltip content that is not a direct child of trigger can be known via tooltip-id attribute on the trigger element. Also, you can use this version if you have large HTML-content in the tooltip.

Fit fürs Examen mit unseren Prüfungstrainern!

  • Kommentare Software auf Keine-Bange.de für das 1. Staatsexamen: Link-Demo
  • Karteikartentrainer mit über 1500 Fragen für das 2. Staatsexamen
  • Karteikartentrainer für das 3. Staatsexamen mit über 600 Fragen in den Fächern Recht und Praxis
mehr Informationen
Show Code
html
<button type="button" id="REPLACE_ID" class="c-btn -small -primary-outline -icon-left" tooltip-id="large-tooltip">
    <i class="far fa-info-circle" aria-hidden="true"></i>
    Open Tooltip via ID
</button>
<div id="large-tooltip" role="tooltip" aria-describedby="REPLACE_ID">
    <p class="h4 c-headline">Fit fürs Examen mit unseren Prüfungstrainern!</p>
    <ul class="c-list -unordered">
        <li>Kommentare Software auf Keine-Bange.de für das 1. Staatsexamen:
            <a href="#" class="c-link -icon-arrow -icon-right">Link-Demo</a>
        </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>

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"

Mehr Informationen
Mehr Informationen
Mehr Informationen
Show Code
html
<div class="h-flex h-space-around">
    <div>
        <i
            class="fa fa-2x fa-info-circle js-tooltip h-color-success"
            aria-hidden="true"
            data-additional-tooltip-classes="rb-klasse-1"
            title="Klasse-1-Defektur (10-16 Risiko-Punkte)"
        ></i>
        <span class="h-sr-only">Mehr Informationen</span>
    </div>
    <div>
        <i
            class="fa fa-2x fa-info-circle js-tooltip h-color-warning"
            aria-hidden="true"
            data-additional-tooltip-classes="rb-klasse-2"
            title="Klasse-2-Defektur (17-23 Risiko-Punkte)"
        ></i>
        <span class="h-sr-only">Mehr Informationen</span>
    </div>
    <div>
        <i
            class="fa fa-2x fa-info-circle js-tooltip h-color-error"
            aria-hidden="true"
            data-additional-tooltip-classes="rb-klasse-3"
            title="Klasse-3-Defektur (24-30 Risiko-Punkte)"
        ></i>
        <span class="h-sr-only">Mehr Informationen</span>
    </div>
</div>

Tooltip 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 content by adding one of the following classes to the tooltip trigger element via the attribute data-additional-tooltip-classes: .-large, .-extra-large

Show Code
html
  <button
      class="c-btn -small -primary-outline js-tooltip"
      data-additional-tooltip-classes="-large"
      title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. "
  >
    Show tooltip with large padding
  </button>
  <button
    class="c-btn -small -secondary-outline js-tooltip"
    title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. "
    >
    Show normal tooltip
  </button>

Tooltip Dynamic/Temporary new ​

Description

These type of tooltips are generated dynamically(programmatically) and are removed from DOM after a certain time or by clicking on the close button (if its created with a close button).

Show HTML Code
html
    <div class="c-float-container -has-input -has-btn">
      <input
        id="dynamic-tooltip-input"
        type="text"
        class="c-input"
        placeholder="Write something here!">
      <button
        id="dynamic-tooltip-trigger"
        class="c-btn -secondary -input"
      >
        Show Tooltip
      </button>
    </div>
Show Usage Code and API Details

Usage (API Documentation) ​

Function Signature ​

javascript
Tooltip.addTemporaryTooltip(ctx)

Parameters ​

ParameterTypeDescriptionDefault
ctxObjectThe context object containing tooltip configuration.N/A
ctx.elHTMLElementThe element to which the tooltip will be attached.Required
ctx.textstringThe text content of the tooltip.Required
ctx.showDelaynumberThe delay before showing the tooltip (in milliseconds).this.tooltipShowDelay
ctx.hideDelaynumberThe delay before hiding the tooltip (in milliseconds).this.tooltipHideDelay
ctx.placementstringThe placement of the tooltip (e.g., 'top', 'bottom').this.tooltipPlacement
ctx.typestringThe type of the tooltip ('info', 'warning', 'success', 'error').'error'
ctx.classstringAdditional CSS classes to apply to the tooltip.''
ctx.removeAfternumberThe time after which the tooltip will be removed (0 means never remove programmatically).5000
ctx.onBeforeShowFunctionCallback function to be called before showing the tooltip.null
ctx.onBeforeHideFunctionCallback function to be called before hiding the tooltip.null
ctx.showCloseButtonbooleanWhether to show a close button on the tooltip.true
ctx.faIconClassesstring|string[]FontAwesome icon classes for the close button.'fa-solid fa-x fa-xs'

Returns ​

An object representing the tooltip entry.

PropertyTypeDescription
tooltipElHTMLElementThe tooltip element.
tooltipUidstringThe unique identifier for the tooltip.
removeFunctionFunction to remove the tooltip.

Example Usage ​

javascript
const tooltipEntry = Tooltip.addTemporaryTooltip({
  el: document.querySelector('#myElement'),
  text: 'This is a temporary tooltip',
  showDelay: 200,
  hideDelay: 300,
  placement: 'top',
  type: 'info',
  class: 'custom-tooltip',
  removeAfter: 5000,
  onBeforeShow: (tooltipEntry) => console.log('Before showing tooltip', tooltipEntry.),
  onBeforeHide: (tooltipEntry) => console.log('Before hiding tooltip', tooltipEntry),
  showCloseButton: true,
  faIconClasses: ['fa-solid', 'fa-times', 'fa-sm']
});

console.log('Tooltip Element:', tooltipEntry.tooltipEl);
console.log('Tooltip UID:', tooltipEntry.tooltipUid);

// Remove the tooltip programmatically
tooltipEntry.remove();

Notes ​

  • The removeAfter property determines how long the tooltip remains visible. Set it to 0 to prevent automatic removal.
  • Callbacks like onBeforeShow and onBeforeHide allow for custom behavior during the tooltip's lifecycle.
  • This function is designed to work with FontAwesome icons for close buttons. Ensure the required classes or styles are available.

Tooltip Delay ​

TIP

The data-tooltip-delay attribute sets the delay for both showing and hiding the tooltip. However, if data-tooltip-show-delay or data-tooltip-hide-delay attributes are also specified, they will take precedence and override the corresponding delays set by data-tooltip-delay.

I'm a tooltip with 1000ms show/hide delay.I'm a tooltip with 1000ms show delay.I'm a tooltip with 1000ms hide delay.
Show Code
html
<div class="h-flex h-space-around">
  <span class="js-tooltip"
    data-tooltip-delay="1000"
    title="I'm a tooltip with 1000ms show/hide delay.">
  <i
    class="fas fa-2x fa-clock -has-tooltip"
    aria-hidden="true"
    ></i>
  <span class="h-sr-only">I'm a tooltip with 1000ms show/hide delay.</span>
  </span>
  <span class="js-tooltip"
    data-tooltip-show-delay="1000"
    title="I'm a tooltip with 1000ms show delay.">
  <i
    class="fas fa-2x fa-clock-four -has-tooltip"
    aria-hidden="true"
    ></i>
  <span class="h-sr-only">I'm a tooltip with 1000ms show delay.</span>
  </span>
  <span class="js-tooltip"
    data-tooltip-hide-delay="1000"
    title="I'm a tooltip with 1000ms hide delay.">
  <i
    class="fas -has-tooltip fa-2x fa-clock-one-thirty"
    aria-hidden="true"
    ></i>
  <span class="h-sr-only">I'm a tooltip with 1000ms hide delay.</span>
  </span>
</div>

Settings and API ​

Show Tooltip API
javascript
// default settings
const settings = {
  triggerSelector: ['.js-tooltip', '[tooltip-id]', '.tooltip', '.html-tooltip', '.c-tooltip__trigger'],

   // will recognize any direct child node as tooltip content
   // when at least one of the below classes exists
  tooltipChildValidClassList: ['tooltip-content', 'c-tooltip__content', 'c-tooltip'],
  tooltipDelay: 200,
  tooltipShowDelay: null, // if null, it will use the tooltipDelay
  tooltipHideDelay: null, // if null, it will use the tooltipDelay
  tooltipPlacement: 'top-start',
};

// additionalSettings: extends the default settings if mergeSettings = true
// if mergeSettings = false then it will override all default settings!
Tooltip.init(additionalSettings = null, mergeSettings = true)

.-has-tooltip adds the default color and hover-color of links to an icon (without any js-functionality). Furthermore, Font Awesome Icons with the class .js-tooltip will get the default link styling.

Open TooltipOpen Tooltip
Show Code
html
<span>
    <i class="far fa-info-circle fa-2x js-tooltip" data-placement="right" data-title="Lorem Ipsum"></i>
    <span class="h-sr-only">Open Tooltip</span>
</span>
<span class="p-l-l">
    <i class="far fa-2x fa-external-link -has-tooltip" aria-hidden="true"></i>
    <span class="h-sr-only">Open Tooltip</span>
</span>

Old Tooltip Classes old ​

WARNING

The following classes are still supported but deprecated. Use the new classes instead for new implementations (see above).

Tooltip Directions ​

TIP

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

Force Tooltip to open to the top ​

.c-tooltip__trigger.-open-top

Open Tooltip
Show Code
html
<div class="c-tooltip__trigger -open-top">
    <i class="fa fa-arrow-alt-circle-up fa-2x h-link-color" aria-hidden="true"></i>
    <span class="h-sr-only">Open Tooltip</span>
    <div class="c-tooltip -large" 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>

Force Tooltip to open to the bottom ​

.c-tooltip__trigger.-open-bottom

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Show Code
html
<div class="c-tooltip__trigger -open-bottom">
    <i class="fa fa-arrow-alt-circle-down fa-2x h-link-color" aria-hidden="true"></i>
    <span class="h-sr-only">Open Tooltip</span>
    <div class="c-tooltip -large" 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>

Colors ​

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

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Show Code
html
<div class="h-flex h-space-between">
    <div>
        <div class="c-tooltip__trigger">
            <i class="fa fa-info-circle fa-2x h-color-success" title="open tooltip"></i>
            <div class="c-tooltip -success">
                <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>
    <div>
        <div class="c-tooltip__trigger">
            <i class="fa fa-info-circle fa-2x h-color-warning" title="open tooltip"></i>
            <div class="c-tooltip -warning">
                <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>
    <div>
        <div class="c-tooltip__trigger">
            <i class="fa fa-info-circle fa-2x h-color-error" title="open tooltip"></i>
            <div class="c-tooltip -error">
                <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>
</div>

Copyright © 2024 - present Pharma4u