<commit_before><div class="sample-wrapper">
    <app-page-header title="Tooltip">
        Displays tooltip to the user for a specific element.
    </app-page-header>
    <section class="sample-content">
        <article class="sample-column">
            <h4 class="sample-title">Simple tooltip</h4>
            <igx-avatar #target="tooltipTarget" [igxTooltipTarget]="simple" [overlaySettings]="settings"
                        src="assets/images/avatar/10.jpg" size="medium" [roundShape]="true"
                        (onTooltipShow)="showing($event)"
                        (onTooltipHide)="hiding($event)"
                        aria-describedby="myid">
            </igx-avatar>

            <div class="custom-width" #simple="tooltip" igxTooltip id="myid">
                Her name is <NAME>
            </div>
        </article>
        <article class="sample-column">
            <h4 class="sample-title">Simple tooltip settings</h4>
            <div>
                <div class="bottomMargin">
                    <igx-switch [(ngModel)]="target.tooltipDisabled">Disable tooltip</igx-switch>
                </div>
                <div class="bottomMargin">
                    <igx-slider minValue="0" maxValue="3000" [step]="100" [(ngModel)]="target.showDelay"></igx-slider>
                    <span>Show Delay: {{target.showDelay}}</span>
                </div>
                <div class="bottomMargin">
                    <igx-slider minValue="0" maxValue="3000" [step]="100" [(ngModel)]="target.hideDelay"></igx-slider>
                    <span>Hide Delay: {{target.hideDelay}}</span>
                </div>
                <div>
                    <button class="btn" (click)="showTooltip()">Show Tooltip</button>
                    <button class="btn" (click)="hideTooltip()">Hide Tooltip</button>
                </div>
            </div>
        </article>
    </section>
    <section class="sample-content">
        <article class="sample-column">
            <h4 class="sample-title">Rich tooltip</h4>
            <article class="card-wrapper">
                <igx-card>
                    <igx-card-content style="padding: 0px;">
                        <div class="location">
                            <igx-icon class="cursorHover" fontSet="material" name="location_on" [igxTooltipTarget]="locationTooltip"></igx-icon>

                            <div class="locationTooltip" #locationTooltip="tooltip" igxTooltip>
                                <div class="locationTooltipContent">
                                    <igx-avatar class="locationIcon" src="assets/images/card/avatars/igLogo.png" size="medium"
                                        [roundShape]="false"></igx-avatar>
                                    <div>
                                        <div>Infragistics Inc. HQ</div>
                                        <div>2 Commerce Dr, Cranbury, NJ 08512, USA</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </igx-card-content>
                    <igx-card-actions>
                        <div class="igx-card-actions__igroup--start">
                            <span igxButton="icon" igxRipple igxRippleCentered="true">
                                <igx-icon fontSet="material" name="favorite"></igx-icon>
                            </span>
                            <span igxButton="icon" igxRipple igxRippleCentered="true">
                                <igx-icon fontSet="material" name="share"></igx-icon>
                            </span>
                        </div>
                    </igx-card-actions>
                </igx-card>
            </article>
        </article>
        <article class="sample-column">
                <h4 class="sample-title">Grid with tooltips</h4>
                <div>
                    <igx-grid [data]="data" width="500px" height="400px" [autoGenerate]="false">
                        <igx-column [field]="'Brand'" dataType="string"></igx-column>
                        <igx-column [field]="'Model'" dataType="string"></igx-column>
                        <igx-column [field]="'Spec'">
                            <ng-template igxCell let-cell="cell"><commit_msg>fix(tooltip): fix icons in tooltip demo #1710<commit_after><div class="sample-wrapper">
    <app-page-header title="Tooltip">
        Displays tooltip to the user for a specific element.
    </app-page-header>
    <section class="sample-content">
        <article class="sample-column">
            <h4 class="sample-title">Simple tooltip</h4>
            <igx-avatar #target="tooltipTarget" [igxTooltipTarget]="simple" [overlaySettings]="settings"
                        src="assets/images/avatar/10.jpg" size="medium" [roundShape]="true"
                        (onTooltipShow)="showing($event)"
                        (onTooltipHide)="hiding($event)"
                        aria-describedby="myid">
            </igx-avatar>

            <div class="custom-width" #simple="tooltip" igxTooltip id="myid">
                Her name is <NAME>
            </div>
        </article>
        <article class="sample-column">
            <h4 class="sample-title">Simple tooltip settings</h4>
            <div>
                <div class="bottomMargin">
                    <igx-switch [(ngModel)]="target.tooltipDisabled">Disable tooltip</igx-switch>
                </div>
                <div class="bottomMargin">
                    <igx-slider minValue="0" maxValue="3000" [step]="100" [(ngModel)]="target.showDelay"></igx-slider>
                    <span>Show Delay: {{target.showDelay}}</span>
                </div>
                <div class="bottomMargin">
                    <igx-slider minValue="0" maxValue="3000" [step]="100" [(ngModel)]="target.hideDelay"></igx-slider>
                    <span>Hide Delay: {{target.hideDelay}}</span>
                </div>
                <div>
                    <button class="btn" (click)="showTooltip()">Show Tooltip</button>
                    <button class="btn" (click)="hideTooltip()">Hide Tooltip</button>
                </div>
            </div>
        </article>
    </section>
    <section class="sample-content">
        <article class="sample-column">
            <h4 class="sample-title">Rich tooltip</h4>
            <article class="card-wrapper">
                <igx-card>
                    <igx-card-content style="padding: 0px;">
                        <div class="location">
                            <igx-icon class="cursorHover" fontSet="material" [igxTooltipTarget]="locationTooltip">location_on</igx-icon>

                            <div class="locationTooltip" #locationTooltip="tooltip" igxTooltip>
                                <div class="locationTooltipContent">
                                    <igx-avatar class="locationIcon" src="assets/images/card/avatars/igLogo.png" size="medium"
                                        [roundShape]="false"></igx-avatar>
                                    <div>
                                        <div>Infragistics Inc. HQ</div>
                                        <div>2 Commerce Dr, Cranbury, NJ 08512, USA</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </igx-card-content>
                    <igx-card-actions>
                        <div class="igx-card-actions__igroup--start">
                            <span igxButton="icon" igxRipple igxRippleCentered="true">
                                <igx-icon fontSet="material">favorite</igx-icon>
                            </span>
                            <span igxButton="icon" igxRipple igxRippleCentered="true">
                                <igx-icon fontSet="material">share</igx-icon>
                            </span>
                        </div>
                    </igx-card-actions>
                </igx-card>
            </article>
        </article>
        <article class="sample-column">
                <h4 class="sample-title">Grid with tooltips</h4>
                <div>
                    <igx-grid [data]="data" width="500px" height="400px" [autoGenerate]="false">
                        <igx-column [field]="'Brand'" dataType="string"></igx-column>
                        <igx-column [field]="'Model'" dataType="string"></igx-column>
                        <igx-column [field]="'Spec'">
                            <ng-template igxCell let-cell="cell">
{'fraction_non_alphanumeric': 0.13797497683039853, 'fraction_numerical': 0.009499536607970344, 'mean_word_length': 1.384806629834254, 'pattern_counts': {'":': 0, '<': 187, '<?xml version=': 0, '>': 187, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 12, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6420789', 'n_tokens_mistral': 2357, 'n_tokens_neox': 2209, 'n_words': 372}