Web Components Tooltip

Ignite UI for Web Components Tooltip 구성 요소는 특정 요소에 대한 도구 설명을 표시하는 방법을 제공합니다. 툴팁은 요소와 관련된 정보를 표시하는 팝업으로, 일반적으로 요소가 키보드 포커스를 받거나 마우스가 그 위로 마우스를 가져갈 때 표시됩니다.

import { defineComponents, IgcTooltipComponent, IgcAvatarComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './index.css';

defineComponents(IgcTooltipComponent, IgcAvatarComponent);
export class TooltipOverview {
  constructor() {
  }
}

new TooltipOverview();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Tooltip Overview</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-avatar id="avatar" src="https://www.infragistics.com/angular-demos-lob/assets/images/avatar/10.jpg"
        shape="circle">
      </igc-avatar>
      <igc-tooltip anchor="avatar">Her name is Madelyn James</igc-tooltip>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
  <% } %>

</body>
</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

igc-avatar {
  --ig-size: var(--ig-size-medium);
}
css

이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

시작하기

사용을 IgcTooltipComponent 시작하려면 먼저 다음 명령을 실행하여 Ignite UI for Web Components 설치해야 합니다.

npm install igniteui-webcomponents
cmd

그런 다음 다음과 같이 필요한 CSS를 가져오고 IgcTooltipComponent 모듈을 등록해야 합니다.

import { defineComponents, IgcTooltipComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcTooltipComponent);
ts

이제 Web Components IgcTooltipComponent의 기본 구성부터 시작할 수 있습니다.

<igc-tooltip anchor="hover-button">
  Congrats you've hovered the button!
</igc-tooltip>

<igc-button id="hover-button">Hover me</igc-button>
html

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

용법

툴팁 대상

원하는 요소에 툴팁을 첨부하려면 anchor 속성을 <igc-tooltip> 요소. 이 속성은 요소 ID 또는 요소에 대한 직접 참조를 허용합니다. ID 참조를 사용하는 경우 anchor 속성을 대상 요소의 ID로 설정합니다.

<igc-button id="target-button">Hover me</igc-button>
<igc-tooltip anchor="target-button">
  Congrats you've hovered the button!
</igc-tooltip>
html

element 인스턴스를 직접 전달하여 대상을 지정할 수도 있습니다.

<igc-tooltip id="tooltip">
  Congrats you've hovered the button!
</igc-tooltip>
<igc-button id="hover-button">Hover me</igc-button>
html

constructor() {
  const anchor = document.querySelector('#hover-button') as IgcButtonComponent;
  const tooltip = document.querySelector('#tooltip') as IgcTooltipComponent;
  tooltip.anchor = anchor;
}
ts

Tooltip 컨텐츠는 <igc-tooltip> element의 여는 태그와 닫는 태그 사이에 사용자 정의 컨텐츠를 배치하여 정의됩니다.

<igc-tooltip>
  This is my custom content here.
</igc-tooltip>
html

또는 간단한 텍스트를 설정하려면 속성을 사용할 수 있습니다 message.

<igc-tooltip message="This is my custom content here."></igc-tooltip>
html

두 가지 접근 방식(슬롯된 콘텐츠와 속성) message을 모두 사용하는 경우 슬롯된 콘텐츠가 우선적으로 적용되고 message 값은 무시됩니다.

<igc-button id="target-button">Hover me</igc-button>
<igc-tooltip anchor="target-button" message="I will be hidden.">
  I will be shown!
</igc-tooltip>
html

이 예제에서는 속성 값 대신 message 슬롯이 있는 콘텐츠("I will be shown!")가 표시됩니다.

IgcTooltipComponent 콘텐츠는 단순한 텍스트 이상일 수 있습니다. 는 IgcTooltipComponent 마크업의 일반 요소이므로 필요한 요소를 추가하고 그에 따라 스타일을 지정하여 콘텐츠를 향상시킬 수 있습니다.

import { defineComponents, IgcAvatarComponent, IgcIconButtonComponent, IgcIconComponent, IgcTooltipComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './index.css';

defineComponents(IgcTooltipComponent, IgcAvatarComponent, IgcIconComponent, IgcIconButtonComponent);
export class RichTooltip {
  constructor() {
    const location =
      '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-480q33 0 56.5-23.5T560-560q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 33 23.5 56.5T480-480Zm0 400Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Z"/></svg>';
    registerIconFromText('location_on', location, 'material');
  }
}

new RichTooltip();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Rich Tooltip</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <div class="map">
        <igc-icon id="location_icon" slot="actions" variant="flat" collection="material" exportparts="icon"
          name="location_on"></igc-icon>
        <igc-tooltip anchor="location_icon" class="locationTooltip">
          <div class="locationTooltipContent">
            <igc-avatar class="logo"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/card/avatars/igLogo.png" size="medium"
              shape="square"></igc-avatar>
            <div>
              <div>Infragistics Inc. HQ</div>
              <div>2 Commerce Dr, Cranbury, NJ 08512, USA</div>
            </div>
          </div>
        </igc-tooltip>
      </div>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
  <% } %>

</body>
</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

igc-icon:hover {
  cursor: pointer;
  color: var(--ig-primary-500);
}

.map {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 272px;
  background-image: url("https://www.infragistics.com/angular-demos-lob/assets/images/card/media/infragisticsMap.png");
  border: 1px solid var(--ig-gray-300);
}

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

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

igc-tooltip::part(base) {
  max-width: 240px;
}
 css

지연 설정 표시/숨기기

를 IgcTooltipComponent 표시하거나 숨기기 전에 지연을 제어하려면 and hideDelay 속성을 사용할 showDelay 수 있습니다. 두 속성 모두 시간을 밀리초 단위로 나타내는 숫자 값을 허용합니다.

<igc-tooltip show-delay="600" hide-delay="800">
  Her name is Madelyn James.
</igc-tooltip>
html

Tooltip API 메서드(show, hide 및 toggle)는 showDelay 및 hideDelay 속성을 고려하지 않는다는 점에 유의해야 합니다. 호출되면 즉시 행동합니다.

배치

또한 IgcTooltipComponent 대상 요소를 기준으로 쉽게 배치할 수 있습니다. 다음 위치 옵션 중 하나와 함께 속성을 사용 placement 하기만 하면 됩니다. top top-start top-end bottom bottom-start bottom-end right right-start right-end left left-start left-end

placement 속성이 설정되지 않은 경우 기본값은 "top" 대상 요소 위에 배치됩니다 IgcTooltipComponent.

또한 닫기 버튼을 IgcTooltipComponent 추가하고 사용자가 닫기 버튼을 클릭하거나 키를 눌러 수동으로 닫을 때까지 계속 표시되는 속성을 사용하여 sticky "고정"을 만들 IgcTooltipComponent 수 있습니다 Esc. 이 동작은 기본 호버 동작을 재정의하여 사용자가 대상 요소 위로 마우스를 올리는 것을 멈출 때 사라지지 않도록 합니다 IgcTooltipComponent.

<igc-button id="target-button">Hover me</igc-button>
<igc-tooltip anchor="target-button" placement="top-start" sticky>
  Congrats you've hovered the button!
</igc-tooltip>
html

다음 예제에서는 모든 위치 옵션과 속성이 작동하는 데모를 볼 수 있습니다 sticky.

import { defineComponents, IgcButtonComponent, IgcTooltipComponent } from 'igniteui-webcomponents';
import { html, render } from 'lit-html';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './index.css';

defineComponents(IgcTooltipComponent, IgcButtonComponent);
export class TooltipPlacement {
  constructor() {
    type PopoverPlacement =
      | 'top'
      | 'top-start'
      | 'top-end'
      | 'bottom'
      | 'bottom-start'
      | 'bottom-end'
      | 'right'
      | 'right-start'
      | 'right-end'
      | 'left'
      | 'left-start'
      | 'left-end';

    const Positions = ['top', 'bottom', 'left', 'right'].flatMap((each) => [
      each,
      `${each}-start`,
      `${each}-end`,
    ]) as Array<PopoverPlacement & {}>;

    let a = document.getElementById('btnWrapper') as HTMLDivElement;

    const template = html`
      <igc-button variant="outlined" id="tooltip-position" style="text-align: center">Click to trigger all supported placements</igc-button>

    ${Positions.map(
      (pos) => html`
        <igc-tooltip anchor="tooltip-position" show-triggers="click" show-delay="0" hide-delay="0" sticky .placement=${pos}>
          <div>
            <strong>${pos}</strong>
          </div>
        </igc-tooltip>
      `
    )}
  `;
    render(template, a);
  }
}

new TooltipPlacement();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Tooltip Placement</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <div id="btnWrapper">
      </div>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
  <% } %>

</body>
</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

#tooltip-position {
  margin: 40px 0 0 120px;
  width: 400px;
  height: 120px;
}

igc-button::part(base) {
  height: 100%;
  border-radius: 0.5rem;
}
 css

트리거

기본적으로 는 IgcTooltipComponent 대상 요소 위로 마우스를 가져가는 동안에만 트리거됩니다. 그러나 및 hideTriggers 속성을 사용하여 showTriggers이 동작을 변경할 수 있으며, 이를 통해 가 IgcTooltipComponent 나타나고 사라지는 시기를 제어할 수 있습니다. 이러한 속성은 이벤트 이름을 값(예: click 또는 keypress) focus으로 수락하여 다양한 시나리오에서 트리거 IgcTooltipComponent 할 수 있도록 합니다.

import { defineComponents, IgcTooltipComponent, IgcAvatarComponent, IgcButtonComponent, IgcInputComponent, IgcCardComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './index.css';

defineComponents(IgcTooltipComponent, IgcAvatarComponent, IgcButtonComponent, IgcInputComponent, IgcCardComponent);
export class TooltipTriggers {
  constructor() {
  }
}

new TooltipTriggers();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Tooltip Triggers</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <div id="triggers-container">
        <igc-card>
          <igc-card-header>
            <h4 slot="title">Default triggers</h4>
          </igc-card-header>
          <igc-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>
            <igc-button variant="outlined" id="triggers-default">Hover over me</igc-button>
            <igc-tooltip anchor="triggers-default">
              I am show on pointer enter and hidden on pointer leave and/or click.
            </igc-tooltip>
          </igc-card-content>
        </igc-card>

        <igc-card>
          <igc-card-header>
            <h4 slot="title">Focus based</h4>
          </igc-card-header>
          <igc-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>
            <igc-button variant="outlined" id="triggers-focus-blur">Focus me</igc-button>
            <igc-tooltip anchor="triggers-focus-blur" show-delay="0" hide-delay="0" show-triggers="focus"
              hide-triggers="blur">
              I am shown on focus and hidden on blur.
            </igc-tooltip>
          </igc-card-content>
        </igc-card>

        <igc-card>
          <igc-card-header>
            <h4 slot="title">Same trigger(s) for showing and hiding</h4>
          </igc-card-header>
          <igc-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>
            <igc-button variant="outlined" id="triggers-click">Click</igc-button>
            <igc-tooltip show-delay="0" hide-delay="0" anchor="triggers-click" show-triggers="click" hide-triggers="click">
              I am show on click and will hide on anchor click.
            </igc-tooltip>
          </igc-card-content>
        </igc-card>

        <igc-card>
          <igc-card-header>
            <h4 slot="title">Keyboard interactions</h4>
          </igc-card-header>
          <igc-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>
            <igc-button variant="outlined" id="triggers-keypress">Press a key</igc-button>
            <igc-tooltip anchor="triggers-keypress" show-triggers="keypress" hide-triggers="keypress blur">
              I am shown on a keypress and will hide on a keypress or blur.
            </igc-tooltip>
          </igc-card-content>
        </igc-card>

        <igc-card>
          <igc-card-header>
            <h4 slot="title">Custom events</h4>
          </igc-card-header>
          <igc-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 variant="outlined" id="triggers-custom" label="Username"></igc-input>
            <igc-tooltip anchor="triggers-custom" show-triggers="igcChange">
              Value changed!
            </igc-tooltip>
          </igc-card-content>
        </igc-card>
      </div>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
  <% } %>

</body>
</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

#triggers-container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  gap: 0.6rem;

  & igc-card {
    max-width: 320px;
  }

  & igc-card-header {
    min-height: 3rem;
  }

  & igc-card-content {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: space-between;
  }
}

.sample {
  padding: 0.5rem 0rem 0rem 0.5rem;
}css

추가 속성

이미 다룬 속성 외에도 구성 요소는 IgcTooltipComponent 동작, 위치 및 모양을 추가로 구성할 수 있는 다양한 추가 속성을 제공합니다.

이름	유형	설명
`open`	부울	툴팁이 표시되는지 여부를 결정합니다.
`disableArrow`	부울	로`true` 설정하면 툴팁의 화살표 표시기를 비활성화합니다.
`offset`	숫자	툴팁과`anchor` 툴팁 사이의 픽셀 거리를 설정합니다.

행동 양식

구성 가능한 속성 외에도 사용할 수 있는 세 가지 메서드도 노출합니다. IgcTooltipComponent

이름	설명
`show`	도구 설명이 아직 표시되지 않은 경우 표시합니다. 대상이 제공되면 대상을 과도도로`anchor` 설정합니다.
`hide`	도구 설명이 아직 숨겨져 있지 않은 경우 숨깁니다.
`toggle`	도구 설명을 표시된 상태와 숨겨진 상태 사이에서 전환합니다.

접근성 및 ARIA 지원

접근성 IgcTooltipComponent을 염두에 두고 구축되었으며 다음과 같은 ARIA 속성을 포함합니다.

role- 도구 설명이 기본 동작 role="tooltip" 인 경우 가 적용됩니다. sticky 속성이 사용하도록 설정되면 역할이 로 status 변경됩니다.
inert- 가시성에 따라 동적으로 전환됩니다. 툴팁이 숨겨지면 비활성화 상태가 됩니다.
aria-atomic- true로 설정하면 변경될 때 전체 툴팁 콘텐츠가 발표되도록 합니다.
aria-live- polite로 설정하여 사용자가 유휴 상태일 때만 업데이트를 발표해야 함을 화면 읽기 프로그램에 알립니다.

스타일링

구성 요소는 IgcTooltipComponent 스타일링에 사용할 수 있는 두 개의 CSS 부분을 노출합니다.

이름	설명
`base`	tooltip 구성 요소의 기본 래퍼입니다.
`bottom`	툴팁 화살표가 포함된 영역입니다.

igc-tooltip::part(base) {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
}

igc-tooltip::part(bottom) {
  border-bottom-color: var(--ig-primary-500);
}
css

import { defineComponents, IgcTooltipComponent, IgcAvatarComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './Styling.css';

defineComponents(IgcTooltipComponent, IgcAvatarComponent);
export class TooltipStyling {
  constructor() {
  }
}

new TooltipStyling();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Tooltip Styling</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-avatar id="avatar" src="https://www.infragistics.com/angular-demos-lob/assets/images/avatar/10.jpg"
        shape="circle">
      </igc-avatar>
      <igc-tooltip id="tool1" anchor="avatar">Her name is Madelyn James</igc-tooltip>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
  <% } %>

</body>
</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-avatar {
  --ig-size: var(--ig-size-medium);
}

igc-tooltip::part(base) {
  background-color: var(--ig-primary-300);
  color: var(--ig-primary-300-contrast);
}

igc-tooltip::part(bottom) {
  border-bottom-color: var(--ig-primary-300);
}css

Ignite UI for Web Components 툴팁 예제