Tooltip | PatternLab (0.1.259)

# Icon Modifier for Tooltips

.-has-tooltip adds "link" styling to icon (without any js-functionality!)

hide code

<i class="far fa-info-circle -has-tooltip" title="open tooltip"></i>

# Container Preview

hide code

<div class="c-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.<br/>
    <a href="#" class="c-link -icon-arrow -icon-right">Link-Demo</a>
</div>
<div class="c-tooltip -large m-t-m">
    <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>

TIP

.c-tooltip__trigger[.-open-left] > .c-tooltip[.-large, .-medium] > ... some HTML content ...

WARNING

Bei der CSS Lösung dürfen keine Links als "c-tooltip__trigger" verwendet werden: Durch das A-Element definierte Anker und Verweise dürfen nicht verschachtelt werden; ein A-Element darf kein anderes A-Elemente enthalten.

hide code

<div class="c-tooltip__trigger">
    <i class="fa fa-info-circle" title="open tooltip"></i>
    <div class="c-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>

# Modifier Classes

.c-tooltip__trigger.-open-left

hide code

<div class="h-type-align-right">
    <div class="c-tooltip__trigger -open-left">
       <i class="far fa-2x fa-info-circle -has-tooltip" title="open tooltip on the left"></i>
        <div class="c-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>

.c-tooltip__trigger.-is-visible > i.far.fa-info-circle.-has-tooltip

hide code

<div>
    <div class="c-tooltip__trigger -is-visible">
        <i class="far fa-2x fa-info-circle -has-tooltip"></i>
        <div class="c-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>

Open Large CSS-Tooltip with HTML Content

hide code

<div class="c-tooltip__trigger">
    <a class="c-link -icon-left"><i class="far fa-info-circle"></i>Open Large CSS-Tooltip with HTML Content</a>
    <div class="c-tooltip -large">
        <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>

# Color Modifiers

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

hide code

<div class="h-flex h-equal-sizing">
    <div class="c-tooltip__trigger">
        <i class="fa fa-info-circle 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 class="c-tooltip__trigger">
        <i class="fa fa-info-circle 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 class="c-tooltip__trigger">
        <i class="fa fa-info-circle 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>

TIP

Based on the library QTip (opens new window).

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

hide code

<span class="js-tooltip" title="I'm a magnificent tooltip.">
<span class="fa fa-2x fa-info-circle"></span>
</span>
<span class="js-tooltip" data-title="I'm a magnificent tooltip.">
<span class="fa fa-2x fa-info-circle"></span>
</span>

TIP

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

hide code

<div class="h-pos-relative">
    <label class="c-label js-tooltip m-r-xxl" data-placement="right" data-title="I'm a magnificent tooltip.">
        Open Tooltip on the right <span class="fa fa-info-circle -has-tooltip"></span>
    </label>
    <label class="c-label js-tooltip" data-placement="left" data-title="I'm a magnificent tooltip.">
        <span class="fa fa-info-circle -has-tooltip"></span> Open Tooltip on the left 
    </label>
</div>

TIP

HTML Content: .js-tooltip + div.c-tooltip__content > ...

Set the attribute data-additional-tooltip-classes="-large", this will add the modifier class -large to the .c-tooltip container.

hide code

<div class="h-pos-relative">
    <a class="c-link -icon-left js-tooltip" data-additional-tooltip-classes="-large">
        <i class="far fa-info-circle"></i>Open Large CSS-Tooltip with HTML Content
    </a>
    <div class="c-tooltip__content">
      <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:      
               <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>
</div>

TIP

Add one of the following classes 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"

hide code

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

# Settings and API

const settings = {
    selector: {
        tooltip: ".c-tooltip",
        tooltipTrigger: ".tooltip, .js-tooltip, .html-tooltip", // use .js-tooltip if possible
        tooltipContent: ".c-tooltip__content, .tooltip-content"
    },
    class: {
        tooltip: "c-tooltip"
    }
};

1
2
3
4
5
6
7
8
9
10

TIP

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

Remove all Tooltips:
Tooltip.remove();

Hide all Tooltips:
Tooltip.hide();

← Teaser Progress Wizard →

# Tooltip

# Icon Modifier for Tooltips

# Container Preview

# CSS-Tooltip

# Modifier Classes

# Tooltip opens on the left

# Tooltip is visible

Fit fürs Examen mit unseren Prüfungstrainern!

# Color Modifiers

# JS-Tooltip

# Tooltip Direction

# Large Tooltip with HTML Content

Fit fürs Examen mit unseren Prüfungstrainern!

# Tooltip States / Color Schemes

# Settings and API