950 #permalink Tooltip

Module: Mithril | React

Tooltip, der entweder bei Mouseover oder durch Klick angezeigt wird.

Source: src/components/_tooltip.scss, line 1

950.1 #permalink Farben

Examples

Default styling

.info

blau-weiß

.danger

rot-weiß

.success

gruen-weiß

.warning

orange-weiß

Markup

<div class="mv2">
    <article class="tooltip">
        Ich wurde gehovered!
        <span class="tip tip--right tip--visible">
            <span class="tip--colored [modifier class]">
                Ich bin der Tooltip!
            </span>
        </span>
    </article>
</div>

Source: src/components/_tooltip.scss, line 15

950.2 #permalink Ausrichtung

Examples

Default styling

.tip--left

links

.tip--right

rechts

.tip--above

drüber

.tip--below

drunter

Markup

<div class="tc mv4">
    <article class="tooltip">
        Ich wurde gehovered!
        <span class="tip [modifier class] tip--visible">
            <span class="tip--colored info">
                Ich bin der Tooltip!
            </span>
        </span>
    </article>
</div>

Source: src/components/_tooltip.scss, line 40

950.3 #permalink Komponente

Examples

Default styling

.tip--component

rendert eine Box für HTML Content

Markup

<div class="tc" style="height: 300px;">
    <article class="tooltip">
        Ich wurde geklickt!
        <span class="tip [modifier class] tip--below tip--visible">
            <!-- Individulles HTML -->
            <div class="whitegray pa3">
                <strong>HTML Box</strong>
                <p>Ich beinhalte etwas mehr als nur einen kurzen Infotext.</p>
                <p>Für mein Aussehen muss ich selbst sorgen.</p>
                <p>Sogar einen Button:</p>
                <button type="button">
                    Ich mache nichts
                </button>
            </div>
            <!-- /Individulles HTML -->
        </span>
    </article>
</div>

Source: src/components/_tooltip.scss, line 65