Angular 도구 설명 지시문 개요

​igxTooltip 및 igxTooltipTarget 지시문은 완전히 사용자 정의 가능한 도구 설명을 생성하고 페이지의 모든 요소에 첨부할 수 있는 기능을 제공합니다. 대부분의 툴팁에는 사용 가능한 위치 수가 제한되어 있지만 igxTooltipTarget 지시문을 사용하면 대상(앵커)과 관련하여 페이지에서 원하는 위치를 유지하면서 스크롤 전략 및 사용자 정의 애니메이션과 같은 다양한 기타 오버레이 설정을 제공할 수 있습니다!

Angular Tooltip Example

Getting Started with Ignite UI for Angular Tooltip

Ignite UI for Angular 도구 설명 지시문을 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

ng add igniteui-angular

Ignite UI for Angular에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

다음 단계는 IgxTooltipModule 당신의 app.module.ts 파일.

// app.module.ts

...
import { IgxTooltipModule } from 'igniteui-angular';
// import { IgxTooltipModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [IgxTooltipModule],
})
export class AppModule {}

또는 16.0.0부터 IgxTooltipDirective 독립 실행형 종속성으로 가져오거나 IGX_TOOLTIP_DIRECTIVES 토큰을 사용하여 구성 요소와 모든 지원 구성 요소 및 지시문을 가져올 수 있습니다.

// home.component.ts

import { IGX_TOOLTIP_DIRECTIVES, IgxAvatarComponent } from 'igniteui-angular';
// import { IGX_TOOLTIP_DIRECTIVES, IgxAvatarComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-avatar class="avatar" #target="tooltipTarget" [igxTooltipTarget]="tooltipRef"
                src="assets/images/avatar/10.jpg" size="medium" shape="circle">
    </igx-avatar>

    <div #tooltipRef="tooltip" igxTooltip>
        Her name is Madelyn James
    </div>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_TOOLTIP_DIRECTIVES, IgxAvatarComponent]
    /* or imports: [IgxTooltipDirective, IgxTooltipTargetDirective, IgxAvatarComponent] */
})
export class HomeComponent {}

이제 Ignite UI for Angular 가져왔으므로 igxTooltip 지시문 사용을 시작할 수 있습니다.

Using the Angular Tooltip

위와 같은 간단한 텍스트 툴팁을 만들고 싶다고 가정해 보겠습니다. 우리의 경우 멋진 IgxAvatar 요소로 사용하므로 먼저 IgxAvatarModule을 가져오는 것부터 시작합니다.

// app.module.ts

import { IgxTooltipModule, IgxAvatarModule } from 'igniteui-angular';
// import { IgxTooltipModule, IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [IgxTooltipModule, IgxAvatarModule],
})
export class AppModule {}

Tooltip target

아바타는 우리의 타겟이 될 것이며 우리가 해야 할 일은 아바타에 igxTooltipTarget 지시어를 설정하는 것뿐입니다. 이는 기본적으로 우리 요소를 툴팁이 있는 요소로 표시합니다.

• ​igxTooltipTarget 지시어는 igxToggleAction 지시어를 확장합니다.
• ​igxTooltipTarget 지시문은 tooltipTarget 이름으로 내보내집니다.

<!--simpleTooltip.component.html-->

<igx-avatar class="avatar" #target="tooltipTarget" igxTooltipTarget
            src="assets/images/avatar/10.jpg" size="medium" shape="circle">
</igx-avatar>

툴팁

이제 툴팁 요소 자체를 만들어 보겠습니다! 간단한 텍스트 도구 설명이 필요하므로 내부에 텍스트가 포함된 일반 div 요소를 정의하고 해당 요소에 igxTooltip 지시어를 설정하여 도구 설명으로 표시합니다.

• ​igxTooltip 지시문은 igxToggle 지시문을 확장합니다.
• ​igxTooltip 지시어는 tooltip이라는 이름으로 내보내집니다.

<!--simpleTooltip.component.html-->

<div #tooltipRef="tooltip" igxTooltip>
    Her name is Madelyn James
</div>

Attach tooltip to target

이제 대상과 도구 설명이 모두 정의되었으므로 남은 작업은 대상의 igxTooltipTarget 선택기에 도구 설명 참조를 할당하는 것뿐입니다.

<!--simpleTooltip.component.html-->

<igx-avatar class="avatar" #target="tooltipTarget" [igxTooltipTarget]="tooltipRef"
            src="assets/images/avatar/10.jpg" size="medium" shape="circle">
</igx-avatar>

<div #tooltipRef="tooltip" igxTooltip>
    Her name is Madelyn James
</div>

모든 것이 잘 진행되었다면 도구 설명 데모 섹션에 표시된 샘플을 볼 수 있습니다.

Show/Hide delay settings

툴팁을 표시하고 숨기기 전에 경과해야 하는 시간을 제어하려면 어떻게 해야 합니까? 이를 위해 igxTooltipTarget 지시어의 showDelay 및 hideDelay 속성을 사용할 수 있습니다. 두 속성 모두 숫자 유형이며 밀리초 단위로 시간이 걸립니다.

Note

​IgxTooltipTargetDirective 및 해당 API 메서드의 내장 UI 상호 작용 동작은 showDelay 및 hideDelay 속성 값을 고려하여 작동합니다. IgxTooltipDirective의 API를 통해 도구 설명을 표시하고 숨기는 경우 showDelay 및 hideDelay 속성 값이 고려되지 않습니다. 필요한 경우 이러한 논리는 애플리케이션의 세부 사항에 따라 수동으로 구현되어야 합니다.

Rich tooltip

​igxTooltip 지시어를 사용하면 툴팁 내용을 사용자 정의하고 스타일을 지정하는 것이 그 어느 때보다 쉬워졌습니다! 툴팁 자체는 마크업의 일반적인 요소이므로 기본적으로 필요한 요소를 추가하여 내용을 개선하고 그에 따라 스타일을 지정할 수 있습니다!

​igxTooltip의 사용을 확장하고 지도의 특정 위치에 대한 자세한 정보를 제공하는 데 사용해 보겠습니다! 간단한 div를 사용하여 지도를 나타내고, IgxAvatar 도구 설명의 로고로, IgxIcon 지도의 위치 아이콘으로 사용하겠습니다. 이를 위해 우리는 해당 모듈을 얻을 것입니다.

// app.module.ts

import { IgxTooltipModule, IgxAvatarModule, IgxIconModule } from 'igniteui-angular';
// import { IgxTooltipModule, IgxAvatarModule, IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [IgxTooltipModule, IgxAvatarModule, IgxIconModule],
})
export class AppModule {}

또한 애플리케이션에는 다음 스타일을 사용합니다.

/* richTooltip.component.css */

.location:hover {
    cursor: pointer;
}

.map {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 252px;
    background-image: url(assets/images/card/media/infragisticsMap.png);
    border: 1px solid #D4D4D4;
}

.locationTooltip {
    width: 310px;
    background-color: var(--igx-grays-700);
    padding: 3px;
    font-size: 13px;
}

.locationTooltipContent {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo {
    margin-right: 10px;
    min-width: 25px;
    width: 45px;
    height: 45px;
}

지도를 만드는 것부터 시작해 보겠습니다. 배경에 지도가 포함된 이미지가 있는 간단한 div가 필요합니다. 또한 우리 위치의 위치를 나타내는 아이콘을 추가하겠습니다! 이 위치에 대한 자세한 정보를 제공하고 싶기 때문에 아이콘이 당연히 툴팁 대상이 됩니다.

<!--richTooltip.component.html-->

<div class="map">
    <igx-icon class="location" [style.color]="'blue'" fontSet="material"
    [igxTooltipTarget]="locationTooltip">location_on</igx-icon>
    ...
</div>

이제 툴팁을 살펴보겠습니다! 콘텐츠의 경우 일부 텍스트 정보 요소와 아바타로 채워지는 컨테이너를 만듭니다. 그런 다음 툴팁을 대상에 첨부하고 멋진 CSS 스타일을 포함하겠습니다!

<!--richTooltip.component.html-->

<div class="wrapper">
    <div class="map">
        <igx-icon class="location" [style.color]="'blue'" fontSet="material"
        [igxTooltipTarget]="locationTooltip">location_on</igx-icon>

        <div class="locationTooltip" #locationTooltip="tooltip" igxTooltip>
            <div class="locationTooltipContent">
                <igx-avatar class="logo" src="assets/images/card/avatars/igLogo.png"
                    size="medium" shape="square"></igx-avatar>
                <div>
                    <div>Infragistics Inc. HQ</div>
                    <div>2 Commerce Dr, Cranbury, NJ 08512, USA</div>
                </div>
            </div>
        </div>
    </div>
</div>

모든 것이 순조롭게 진행되었다면 위치와 툴팁은 다음과 같습니다:

Overlay configuration

​igxTooltip 및 igxTooltipTarget 지시문은 모두 IgxOverlayService 사용하여 해당 도구 설명 요소를 열고 닫습니다.

​igxTooltipTarget 지시문은 도구 설명의 애니메이션, UI에서의 위치 등을 사용자 정의하는 데 사용할 수 있는 overlaySettings 속성(igxToggleAction에서 상속됨)을 노출합니다! 이 속성을 설정하지 않으면 기본 오버레이 설정이 사용됩니다.

Note

​overlaySettings 통해 설정된 모든 속성은 기본 오버레이 설정과 동일한 속성을 재정의하며 도구 설명에 직접적인 영향을 미칩니다.

스타일링

툴팁 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

가장 간단한 접근 방식에 따라, 우리는 tooltip-theme 확장하고 $text-color, $background 및 $border-radius 매개변수를 허용하는 새로운 테마를 생성합니다.

$dark-tooltip: tooltip-theme(
    $text-color: #ECAA53,
    $background: #011627,
    $border-radius: 6px
);

Note

툴팁 콘텐츠의 일부로 사용되는 추가 구성요소(예: IgxButton, IgxSwitch 등)의 스타일을 지정하려면 해당 구성요소에 특정한 추가 테마를 생성하고 툴팁 범위에만 배치해야 합니다. 나머지 애플리케이션에는 영향을 미치지 않습니다.)

툴팁은 IgxOverlayService 사용하므로 사용자 정의 테마가 스타일을 지정하려는 툴팁에 도달할 수 있도록 툴팁이 표시될 때 DOM에 배치될 특정 아웃렛을 제공합니다.

<igx-avatar #target="tooltipTarget" [igxTooltipTarget]="tooltipRef"
            [igxToggleOutlet]="outlet">
</igx-avatar>

<div #outlet="overlay-outlet" igxOverlayOutlet>
    <div #tooltipRef="tooltip" igxTooltip>
        Her name is Madelyn James
    </div>
</div>

Note

​IgxOverlayService 사용하여 표시되는 요소에 테마를 제공하는 다양한 옵션에 대해 자세히 알아보려면 오버레이 스타일 항목을 살펴보세요.

Including Themes

마지막 단계는 애플리케이션에 구성 요소 테마를 포함하는 것입니다.

​$legacy-support​ ​true로 설정된 경우 다음과 같은 구성 요소 테마를 포함합니다.

 @include tooltip($dark-tooltip);

Note

구성 요소가 Emulated ViewEncapsulation을 사용하는 경우::ng-deep 사용하여 이 캡슐화를 penetrate 해야 합니다.

:host {
     ::ng-deep {
        @include tooltip($dark-tooltip);
    }
}

​$legacy-support​ ​false (기본값)로 설정된 경우 다음과 같은 구성 요소 CSS 변수를 포함합니다.

@include css-vars($dark-tooltip);

Note

구성 요소가 Emulated ViewEncapsulation을 사용하는 경우 변수를 재정의하려면 전역 선택기가 필요하므로 여전히:host 사용해야 합니다.

:host {
    @include css-vars($dark-tooltip);
}

이제 스타일이 지정된 툴팁은 다음과 같아야 합니다.

Demo

Accessibility

​igxTooltip 지시문이 있는 요소에는 자동 생성된 id 속성(개발자가 설정하지 않은 경우), 도구 설명 role 및 도구 설명 표시 여부에 따라 자동으로 업데이트되는 aria-hidden 속성이 있습니다. 대상의 aria-describedby 속성을 해당 도구 설명의 id로 설정하면 도구 설명 요소에 대한 참조가 제공됩니다. 이는 최종 사용자가 도구 설명을 트리거할 때 도구 설명의 내용을 읽는 데 필요한 정보를 화면 판독기에 제공합니다.

다음 시나리오에서는 특별한 주의가 필요합니다.

• 도구 설명 내용이 너무 복잡하여 자동으로 해석할 수 없습니다.
• 도구 설명은 내장된 동작 대신 수동으로 구현된 동작(예: 수동으로 표시/숨기기)과 함께 사용됩니다.
• 대상 요소에 초점을 맞출 수 없습니다.

API References

이 기사에서 우리는 페이지의 요소에 대한 멋진 툴팁을 생성, 구성 및 스타일 지정하는 방법을 배웠습니다! 또한 아이콘 및 아바타와 같은 Ignite UI for Angular 사용하여 애플리케이션 디자인을 개선했습니다! 해당 API는 다음과 같습니다.

• IgxTooltip 지시문
• IgxTooltipTarget 지시어

사용된 추가 구성요소 및/또는 지시어:

• IgxAvatar구성 요소
• IgxIconComponent
• IgxToggle 지시어
• IgxToggleAction 지시어

Styles:

• IgxTooltip 지시문 스타일
• IgxAvatar컴포넌트 스타일
• IgxIconComponent 스타일

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Angular 포럼
• Ignite UI for Angular GitHub