Blazor Tooltip

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

    Ignite UI for Blazor Tooltip Example

    Getting Started

    사용하기 IgbTooltip 전에 다음과 같이 등록해야 합니다.

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbTooltipModule));

    또한 구성 요소에 IgbTooltip 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일 또는 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치해야 합니다.

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    Ignite UI for Blazor에 대한 완전한 소개는 '시작 주제'를 읽어보세요.

    이제 Blazor IgbTooltip의 기본 구성으로 시작할 수 있습니다.

    <IgbTooltip Anchor="hover-button">
  Congrats you have hovered the button!
</IgbTooltip>

<IgbButton id="hover-button">Hover me</IgbButton>

    Usage

    Tooltip target

    원하는 요소에 도구 설명을 연결하려면 의 IgbTooltip 속성을 사용하고 Anchor 대상 요소의 ID로 설정합니다.

    <IgbButton id="target-button">Hover me</IgbButton>
<IgbTooltip Anchor="target-button">
  Congrats you have hovered the button!
</IgbTooltip>

    Tooltip content

    도구 설명 콘텐츠는 의 IgbTooltip 여는 태그와 닫는 태그 사이에 사용자 지정 콘텐츠를 배치하여 정의됩니다.

    <IgbTooltip>
  Congrats you have hovered the button!
</IgbTooltip>

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

    Show/Hide delay settings

    표시 IgbTooltip 및 숨기기 전에 지연을 제어하려면 및 HideDelay 속성을 사용할 ShowDelay 수 있습니다. 두 속성 모두 밀리초 단위의 시간을 나타내는 숫자 값을 허용합니다.

    <IgbTooltip ShowDelay="600" HideDelay="800">
  Her name is Madelyn James.
</IgbTooltip>

    [!NOTE] 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 IgbTooltip 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 PopoverPlacement options.

    If the Placement property is not set, the default value is Bottom, which places the IgbTooltip below the target element.

    또한 IgbTooltip "sticky" 를 사용하여 Sticky 속성은 닫기 버튼을 추가하고 IgbTooltip 사용자가 닫기 버튼을 클릭하거나 Esc 열쇠. 이 동작은 기본 가리키기 동작을 재정의하여 IgbTooltip 사용자가 대상 요소 위로 마우스를 가져가는 것을 멈출 때 사라지지 않습니다.

    The IgbTooltip also includes an optional arrow indicator that can be configured via the WithArrow property. The arrow visually connects the tooltip to its anchor element and its position automatically adjusts based on the tooltip's Placement.

    <IgbButton id="target-button">Hover me</IgbButton>
<IgbTooltip Anchor="target-button" Placement="PopoverPlacement.TopStart" Sticky="true" DisableArrow="true">
  Congrats you have hovered the button!
</IgbTooltip>

    다음 예제에서는 모든 도구 설명 배치 옵션, 화살표 위치 지정 동작 및 Sticky 작동 중인 속성에 대한 데모를 볼 수 있습니다.

    Triggers

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

    Advanced Example

    다른 IgbTooltip 구성 요소와 원활하게 통합되므로 구성 요소가 포함된 고급 도구 설명을 만들 수 있습니다. 다음 예제에서는 , IgbAvatar, IgbCard​ ​IgbCategoryChart​ ​IgbIcon​ ​IgbButton​ ​IgbBadge 및 구성 요소를 사용하여 IgbList 설명이 포함된 도구 설명을 만드는 방법을 볼 수 있습니다.

    Additional Properties

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

    이름 유형 설명
    Open 부울 툴팁이 표시되는지 여부를 결정합니다.
    WithArrow 부울 도구 설명에 대한 화살표 표시기를 렌더링할지 여부를 결정합니다.
    Offset 숫자 툴팁과Anchor 툴팁 사이의 픽셀 거리를 설정합니다.

    Methods

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

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

    Accessibility & ARIA Support

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

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

    Styling

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

    이름 설명
    base tooltip 구성 요소의 기본 래퍼입니다.
    top, right, bottom, left ... 도구 설명 화살표가 포함된 영역입니다. 부품 이름은 도구 설명 배치 특성의 값과 일치합니다. 
    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);
}

    API References

    Additional Resources