Phoenix Reisen Styleguide

950 #permalink Tooltip

Module: Mithril React

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

Source: src/components/_tooltip.scss, line 1
Examples
Default styling
Ich wurde gehovered! Ich bin der Tooltip!
.info
blau-weiß
Ich wurde gehovered! Ich bin der Tooltip!
.danger
rot-weiß
Ich wurde gehovered! Ich bin der Tooltip!
.success
gruen-weiß
Ich wurde gehovered! Ich bin der Tooltip!
.warning
orange-weiß
Ich wurde gehovered! Ich bin der Tooltip!
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
Examples
Default styling
Ich wurde gehovered! Ich bin der Tooltip!
.tip--left
links
Ich wurde gehovered! Ich bin der Tooltip!
.tip--right
rechts
Ich wurde gehovered! Ich bin der Tooltip!
.tip--above
drüber
Ich wurde gehovered! Ich bin der Tooltip!
.tip--below
drunter
Ich wurde gehovered! Ich bin der Tooltip!
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
Examples
Default styling
Ich wurde geklickt!
HTML Box

Ich beinhalte etwas mehr als nur einen kurzen Infotext.

Für mein Aussehen muss ich selbst sorgen.

Sogar einen Button:

.tip--component
rendert eine Box für HTML Content
Ich wurde geklickt!
HTML Box

Ich beinhalte etwas mehr als nur einen kurzen Infotext.

Für mein Aussehen muss ich selbst sorgen.

Sogar einen Button:

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