Web Components Tooltip

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

    Ignite UI for Web Components Tooltip Example

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    시작하기

    To start using the IgcTooltipComponent, first, you need to install the Ignite UI for Web Components by running the following command:

    npm install igniteui-webcomponents
cmd

    After that, you need to import the IgcTooltipComponent, its necessary CSS, and register its module, as follows:

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

defineComponents(IgcTooltipComponent);
ts

    Now you can start with a basic configuration of the 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에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

    Usage

    Tooltip target

    To attach a tooltip to the desired element, use the anchor property on the <igc-tooltip> element. This property accepts either an element ID or a direct reference to an element. When using an ID reference, simply set the anchor property to the ID of the target element.

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

    The Tooltip content is defined by placing custom content between the opening and closing tags of the <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!")가 표시됩니다.

    The IgcTooltipComponent content can be more than just simple text. Since the IgcTooltipComponent is a regular element in the markup, you can enhance its content by adding any elements you need and styling them accordingly.

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Show/Hide delay settings

    If you want to control the delay before showing and hiding the IgcTooltipComponent, you can use the showDelay and hideDelay properties. Both properties accept a number value representing time in milliseconds.

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

    It's important to note that the Tooltip API methods — show, hide, and toggle — DO NOT take the showDelay and hideDelay properties into account. They act immediately when invoked.

    Placement

    The IgcTooltipComponent can also be positioned relative to its target element with ease. All you need to do is use the placement property along with one of the following position options: top, top-start, top-end, bottom, bottom-start, bottom-end , right, right-start, right-end, left, left-start, left-end.

    If the placement property is not set, the default value is "top", which places the IgcTooltipComponent above the target element.

    Additionally, you can make the IgcTooltipComponent "sticky" using the sticky property, which adds a close button and keeps the IgcTooltipComponent visible until the user closes it manually - either by clicking the close button or pressing the Esc key. This behavior overrides the default hover behavior, preventing the IgcTooltipComponent from disappearing when the user stops hovering over the target element.

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Triggers

    By default, the IgcTooltipComponent is triggered only while hovering over the target element. However, you can change this behavior using the showTriggers and hideTriggers properties, which allow you to control when the IgcTooltipComponent appears and disappears. These properties accept event names as values—such as click, focus, or keypress—letting you trigger the IgcTooltipComponent in different scenarios.

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Additional Properties

    Apart from the properties we've already covered, the IgcTooltipComponent component offers a variety of additional properties that allow you to further configure its behavior, position, and appearance.

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

    Methods

    In addition to its configurable properties, the IgcTooltipComponent also exposes three methods that you can use:

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

    Accessibility & ARIA Support

    The IgcTooltipComponent is built with accessibility in mind and includes the following ARIA attributes:

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

    Styling

    구성 요소는 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

    EXAMPLE
    TS
    HTML
    index.css
    Styling.css
    Edit in:

    API References

    Additional Resources