Angular 툴팁 컴포넌트 | Ignite UI for Angular

이igxTooltip 지침igxTooltipTarget은 완전히 사용자 맞춤형 툴팁을 만들고 페이지의 어떤 요소에도 부착할 수 있는 기능을 제공합니다. 대부분의 툴팁은 제한된 수의 위치를 제공하지만, 이 지침 덕분에igxTooltipTarget 목표(앵커)와 관련되면서 원하는 어떤 위치든 지정할 수 있고, 스크롤 전략이나 커스텀 애니메이션 같은 다양한 오버레이 설정을 제공할 수 있습니다!

Ignite UI for Angular Tooltip 지시문을 시작하려면 먼저 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 수 있습니다.

위에서 말한 것처럼 간단한 텍스트 툴팁을 만들고 싶다고 가정해 봅시다. 저희 경우에는 awesomeIgxAvatar을 요소로 사용해서 첫 번째 원소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이 지시는 툴팁 이라는 이름으로 내보내집니다.

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

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

이제 목표와 툴팁을 모두 정의했으니, 이제 툴팁의 참조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>

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

내용이igxTooltip 단순한 텍스트 이상일 수 있습니다. 툴팁 자체가 마크업의 일반적인 요소이기 때문에, 필요한 요소를 추가하고 스타일링하여 내용을 향상시킬 수 있습니다.

이 사용igxTooltip 법을 확장해서 지도상의 특정 위치에 대한 더 많은 정보를 제공해 봅시다! 지도를 나타내는 간단한 div,IgxAvatar 툴팁의 로고용,IgxIcon 지도의 위치 아이콘용 div를 사용할 것입니다. 이를 위해 각각의 모듈을 받을 예정입니다.

// 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>

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

Advanced Example

툴팁은 다른 컴포넌트와 원활하게 통합되어, 그 안에 컴포넌트를 포함하는 고급 툴팁을 만들 수 있습니다. 다음 예시에서는 ,그리고 컴포넌트를 사용하여IgxListIgxAvatarIgxIconIgxBadgeIgxButtonIgxCardIgxCategoryChart 설명 툴팁을 만드는 방법을 볼 수 있습니다.

Show/Hide delay settings

툴팁을 보여주고 숨기기 전에 지나야 하는 시간을 조절하고 싶다면? 이를 위해 지시의 속성showDelay를hideDelayigxTooltipTarget 사용할 수 있습니다. 두 속성 모두 유형 번호 이며 밀리초 단위로 시간이 소요됩니다.

Note

작품의IgxTooltipTargetDirectiveshowDelay 내장 UI 상호작용 동작은 성과hideDelay 성향 값을 고려합니다. API나 APIIgxTooltipDirective를 통해 툴팁을 보여주고 숨기는 것은 와showDelay 속성 값을 고려hideDelay 하지 않습니다. 필요하다면 이러한 논리는 애플리케이션의 구체적인 조건에 따라 수동으로 구현되어야 합니다.

Overlay configuration

와igxTooltip 디igxTooltipTarget 렉시브 모두 각각의 툴팁 요소를 열고 닫는 데 사용됩니다IgxOverlayService.

igxTooltipTarget이 지시는 속성 하나를 공개positionSettings 하며, 이를 통해 툴팁의 애니메이션, UI 내 위치 등 다양한 기능을 커스터마이즈할 수 있습니다! 이 속성이 설정되어 있지 않으면 기본 위치 설정이 사용됩니다.

툴팁을 더 맞춤화하려면 (다음에서overlaySettings 상속된 속성)을 사용igxToggleAction 하세요.

<igx-icon [igxTooltipTarget]="tooltipRef" [positionSettings]="positionSettings" [overlaySettings]="overlaySettings">
  info
</igx-icon>

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

public positionSettings: PositionSettings = {
  horizontalDirection: HorizontalAlignment.Left,
  horizontalStartPoint: HorizontalAlignment.Left,
  verticalDirection: VerticalAlignment.Top,
  verticalStartPoint: VerticalAlignment.Bottom,
  openAnimation: useAnimation(slideInTop, { params: { duration: '2000ms' } }),
  closeAnimation: useAnimation(slideOutBottom, { params: { duration: '2000ms'} }),
  offset: 10
}

public overlaySettings: OverlaySettings = {
  closeOnEscape: false,
};

Note

또는positionSettings 설정된overlaySettings 속성은 기본 설정에서 같은 속성을 덮어쓰고 툴팁에 직접적인 영향을 줍니다.

Additional Properties

이미 다룬 속성 외에도,igxTooltipTarget 툴팁의 동작과 외관을 추가로 설정할 수 있는 다양한 추가 속성을 제공합니다.

툴팁을 '고정sticky '하게 하면 닫기 버튼을 추가해 사용자가 수동으로 닫을 때까지 툴팁을 유지할 수 있습니다. 닫기 버튼을 클릭하거나 키를 누르Esc 면 됩니다. 이 동작은 기본 호버링 동작을 덮어써, 사용자가 목표 요소 위에 마우스를 멈출 때 툴팁이 사라지는 것을 방지합니다.

<igx-icon [igxTooltipTarget]="tooltipRef" [sticky]="true">
  info
</igx-icon>

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

기본 닫기 버튼을 커스터마이즈하려면 속성 주소를closeButtonTemplate 사용하세요.


<igx-icon [igxTooltipTarget]="tooltipRef" [sticky]="true" [closeButtonTemplate]="customTemplate">
  info
</igx-icon>

<ng-template #customTemplate>
  <igx-icon>cancel</igx-icon>
</ng-template>

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

Note

도구를closeButtonTemplate 통해 추가된 모든 커스텀 콘텐츠는 툴팁이 고정 모드일 때만 렌더링됩니다.

또한, 속성을 사용hasArrow 해 툴팁에 화살표 표시기를 추가할 수 있습니다.

<igx-icon [igxTooltipTarget]="tooltipRef" [hasArrow]="true">
  info
</igx-icon>

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

화살표 요소는 제공된 위치 설정에 따라 위치됩니다. 방향과 시작 지점이 미리 정의된 위치 값과 일치하지 않을 경우, 화살표는 툴팁의 상단 중앙(기본 위치bottom)에 위치합니다.

미리 정의된 위치 값

위치	수평 방향	수평 시작점	수직 방향	수직 시작점
맨 위	수평정렬.중심	수평정렬.중심	VerticalAlignment.Top	VerticalAlignment.Top
최고 시작	수평 정렬.오른쪽	수평정렬.왼쪽	VerticalAlignment.Top	VerticalAlignment.Top
최고급	수평정렬.왼쪽	수평 정렬.오른쪽	VerticalAlignment.Top	VerticalAlignment.Top
맨 아래	수평정렬.중심	수평정렬.중심	수직 정렬.하단	수직 정렬.하단
하단 시작	수평 정렬.오른쪽	수평정렬.왼쪽	수직 정렬.하단	수직 정렬.하단
최하위	수평정렬.왼쪽	수평 정렬.오른쪽	수직 정렬.하단	수직 정렬.하단
오른쪽	수평 정렬.오른쪽	수평 정렬.오른쪽	수직정렬.중간	수직정렬.중간
오른쪽 시작	수평 정렬.오른쪽	수평 정렬.오른쪽	수직 정렬.하단	VerticalAlignment.Top
오른쪽 끝	수평 정렬.오른쪽	수평 정렬.오른쪽	VerticalAlignment.Top	수직 정렬.하단
왼쪽	수평정렬.왼쪽	수평정렬.왼쪽	수직정렬.중간	수직정렬.중간
왼쪽 시작	수평정렬.왼쪽	수평정렬.왼쪽	수직 정렬.하단	VerticalAlignment.Top
왼쪽 끝	수평정렬.왼쪽	수평정렬.왼쪽	VerticalAlignment.Top	수직 정렬.하단

다음 예에서는 모든 위치 옵션과 화살표 위치 지정 동작의 데모를 볼 수 있습니다.

화살표 위치 사용자 지정

화살표 위치를 커스터마이즈하려면 이 메서드를positionArrow(arrow: HTMLElement, arrowFit: ArrowFit) 덮어쓸 수 있습니다.

예를 들어:

export class CustomStrategy extends TooltipPositioningStrategy {
  constructor(settings?: PositionSettings) {
    super(settings);
  }

  public override positionArrow(arrow: HTMLElement, arrowFit: ArrowFit): void {
    Object.assign(arrow.style, {
      left: '-0.25rem',
      transform: 'rotate(-45deg)',
      [arrowFit.direction]: '-0.25rem',
    });
  }
}

public overlaySettings: OverlaySettings = {
  positionStrategy: new CustomStrategy({
    horizontalDirection: HorizontalAlignment.Right,
    horizontalStartPoint: HorizontalAlignment.Right,
    verticalDirection: VerticalAlignment.Bottom,
    verticalStartPoint: VerticalAlignment.Bottom,
  })
};

<igx-icon [igxTooltipTarget]="tooltipRef" [hasArrow]="true" [overlaySettings]="overlaySettings">
  info
</igx-icon>

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

스타일링

툴팁 스타일링을 시작하려면, 모든 테마 함수와 컴포넌트 믹스인이 있는 파일을 가져와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>

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

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

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

Demo

Styling with Tailwind

저희의 맞춤형 Tailwind 유틸리티 클래스를 사용해 툴팁을 스타일링할 수 있습니다. 먼저 Tailwind를 꼭 설정 하세요.

글로벌 스타일시트에서 Tailwind 가져오기와 함께, 원하는 테마 유틸리티를 다음과 같이 적용할 수 있습니다:

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

유틸리티 파일에는 테마 변형 두 가지light가dark 모두 포함되어 있습니다.

라이트 테마에는 클래스를 사용light-* 하세요.
어두운 테마에는 클래스를 사용dark-* 하세요.
접두사 뒤에 컴포넌트 이름을 덧붙이세요,light-tooltipdark-tooltip 예: .

이 클래스들이 적용되면 동적 테마 계산이 가능합니다. 생성된 CSS 변수를 다음arbitrary properties으로 덮어쓸 수 있습니다. 콜론 다음에는 유효한 CSS 색상 형식(HEX, CSS 변수, RGB 등)을 입력하세요.

전체 속성 목록은 IgxTooltip 테마에서 확인할 수 있습니다. 문법은 다음과 같습니다:

<div
  class="!light-tooltip ![--background:#90B69F]"
  #tooltipRef="tooltip"
  igxTooltip>
  Her name is Madelyn James
</div>

Note

느낌표(!)는 유틸리티 클래스가 우선순위가 되도록 보장하기 위해 필요합니다. Tailwind는 레이어에 스타일을 적용하는데, 이 스타일을 중요하게 표시하지 않으면 컴포넌트의 기본 테마에 의해 덮어쓰여집니다.

마지막에 툴팁은 다음과 같이 보여야 합니다:

Accessibility

igxTooltip접근성을 고려하여 구축되었으며 다음과 같은 속성과 ARIA 속성을 포함하고 있습니다:

idproperty: 개발자가 설정하지 않은 경우 자동 생성.
role- 툴팁이 기본 동작일 때 적용role="tooltip" 됩니다. 속성이sticky 활성화되어 있으면 역할이 바status 뀝니다.
aria-hidden- 툴팁이 보이는지 여부에 따라 자동으로 업데이트됩니다.

대상의 aria-descriptdby 속성을 해당 툴팁id에 설정하면 툴팁 요소에 대한 참조가 제공됩니다. 이 기능은 최종 사용자가 툴팁을 실행할 때 툴팁 내용을 읽어낼 수 있는 정보를 스크린 리더에게 제공합니다.

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

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

Notes and Limitations

한정	설명
화살표가 있는 사용자 지정 위치 전략	지시문은`igxTooltipTarget`를`TooltipPositionStrategy` 사용하여 도구 설명 및 화살표 요소를 배치합니다. 사용자 지정`positionStrategy`이 사용되고`hasArrow`로`true` 설정된 경우 사용자 지정 전략은 을 확장해야 합니다`TooltipPositionStrategy`. 그렇지 않으면 화살표가 표시되지 않습니다.

API References

이 글에서는 페이지의 요소에 대한 멋진 툴팁을 만들고, 구성하고, 스타일을 지정하는 방법을 알아보았습니다! 또한 아이콘과 아바타와 같은 추가적인 Ignite UI for Angular 구성 요소를 사용하여 애플리케이션의 디자인을 개선했습니다! 해당 API는 아래와 같습니다.

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

Styles:

Additional Resources

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

Angular 툴팁 지시문 개요

Angular Tooltip Example

Getting Started with Ignite UI for Angular Tooltip

Using the Angular Tooltip

Tooltip target

툴팁

Attach tooltip to target

Rich tooltip

Advanced Example

Show/Hide delay settings

Note

Overlay configuration

Note

Additional Properties

Note

미리 정의된 위치 값

화살표 위치 사용자 지정

스타일링

Note

Demo

Styling with Tailwind

Note

Accessibility

Notes and Limitations

API References

Additional Resources

테마