igniteui-angular-samples/src/app/interactions/tooltip/tooltip-triggers/tooltip-triggers.component.html at 67d15d026c16cd1b6c6107bfd6c916bf3af84529 · IgniteUI/igniteui-angular-samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<div class="triggers-container">
    <igx-card>
        <igx-card-header>
            <h4 igxCardHeaderTitle>Default triggers</h4>
        </igx-card-header>
        <igx-card-content>
            <p>
                Hovering over the button below will display the tooltip using its default configuration: it appears on <strong>pointer enter</strong> and hides on <strong>pointer leave</strong> or <strong>click</strong>.
            </p>
            <button igxButton="outlined" [igxTooltipTarget]="triggersDefault">Hover over me</button>
        </igx-card-content>
    </igx-card>
    <div #triggersDefault="tooltip" igxTooltip>
        I am shown on pointer enter and hidden on pointer leave and/or click.
    </div>

    <igx-card>
        <igx-card-header>
            <h4 igxCardHeaderTitle>Focus based</h4>
        </igx-card-header>
        <igx-card-content>
            <p>
              In this instance, the tooltip is bound to show on its anchor
              <strong>focus</strong> and will hide when its anchor is
              <strong>blurred</strong>.
            </p>
            <p>Try to navigate with a Tab key to the anchor to see the effect.</p>
            <button igxButton="outlined" [igxTooltipTarget]="triggersFocusBlur" [showDelay]="0" [hideDelay]="0" [showTriggers]="'focus'" [hideTriggers]="'blur'">Focus me</button>
        </igx-card-content>
    </igx-card>
    <div #triggersFocusBlur="tooltip" igxTooltip>
        I am shown on focus and hidden on blur.
    </div>

    <igx-card>
        <igx-card-header>
            <h4 igxCardHeaderTitle>Same trigger(s) for showing and hiding</h4>
        </igx-card-header>
        <igx-card-content>
            <p>
              The same trigger can be bound to both show and hide the tooltip. The
              button below has its tooltip bound to show/hide on
              <strong>click</strong>.
            </p>
            <button igxButton="outlined" [igxTooltipTarget]="triggersClick" [showDelay]="0" [hideDelay]="0" [showTriggers]="'click'" [hideTriggers]="'click'">Click</button>
        </igx-card-content>
    </igx-card>
    <div #triggersClick="tooltip" igxTooltip>
        I am shown on click and will hide on anchor click.
    </div>

    <igx-card>
        <igx-card-header>
            <h4 igxCardHeaderTitle>Keyboard interactions</h4>
        </igx-card-header>
        <igx-card-content>
            <p>
              Keyboard interactions are also supported. The button below has its
              tooltip bound to show on a <strong>keypress</strong> and hide on a
              <strong>keypress</strong> or <strong>blur</strong>.
            </p>
            <p>Try it out by focusing the button and pressing a key.</p>
            <button igxButton="outlined" [igxTooltipTarget]="triggersKeypress" [showTriggers]="'keypress'" [hideTriggers]="'keypress,blur'">Press a key</button>
        </igx-card-content>
    </igx-card>
    <div #triggersKeypress="tooltip" igxTooltip>
        I am shown on a keypress and will hide on a keypress or blur.
    </div>

    <igx-card>
        <igx-card-header>
            <h4 igxCardHeaderTitle>Custom events</h4>
        </igx-card-header>
        <igx-card-content>
            <p>
              The tooltip supports any DOM event, including custom events. Try entering a value in the input below, then "commit" it by either <strong>blurring</strong> the input or pressing <strong>Enter</strong>.
            </p>
            <igc-input outlined label="Username" [igxTooltipTarget]="triggersCustom" [showTriggers]="'igcChange'"></igc-input>
        </igx-card-content>
    </igx-card>
    <div #triggersCustom="tooltip" igxTooltip>
        Value changed!
    </div>
</div>