Blazor Tooltip

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

    Ignite UI for Blazor Tooltip Example

    Getting Started

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

    // in Program.cs file

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

    스타일링을 컴포넌트에 적용하려면 추가 CSS 파일을 연결해야 합니다IgbTooltip. 다음 내용은 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에 대한 완전한 소개는 '시작 주제'를 읽어보세요.

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

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

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

    Usage

    Tooltip target

    원하는 요소에 툴팁을 첨부하려면 의Anchor 속성을 사용하고IgbTooltip 대상 요소의 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 다면, andShowDelay 속성을HideDelay 사용할 수 있습니다. 두 속성 모두 밀리초 단위의 시간을 나타내는 숫자 값을 받아들입니다.

    <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

    그IgbTooltip 또한 목표 요소에 대해 쉽게 위치를 지정할 수 있습니다. 필요한 것은 다음 기능을 사용하는 것입니다.Placement 재산과 함께PopoverPlacement 옵션.

    속성이Placement 설정되어 있지 않으면 기본값이 되어 목표Bottom 요소 아래에 위치IgbTooltip 합니다.

    또한, '고정' 기능을 사용할IgbTooltip​Sticky 수 있는데, 이 속성은 닫기 버튼을 추가해 사용자가 수동으로 닫을 때까지 보이게 유지IgbTooltip 합니다 (닫기 버튼을 클릭하거나 키를 누르Esc 면 됩니다). 이 동작은 기본 호버 동작을 덮어써, 사용자가 목표 요소 위에 마우스를 멈출 때 이 동작이IgbTooltip 사라지지 않도록 합니다.

    ​IgbTooltip또한 속성에서WithArrow 설정할 수 있는 선택적 화살표 표시기도 포함되어 있습니다. 화살표는 툴팁을 앵커 요소와 시각적으로 연결하며, 툴팁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 대상 요소 위에 마우스를 올려놓았을 때만 트리거됩니다. 하지만 이 동작은 andShowTriggers 속성을 통해HideTriggers 언제 나타나고 사라지는지 조절IgbTooltip 할 수 있습니다. 이 속성들은 이벤트 이름과 같은click​focus​keypress 값으로 받아들여, 다양한 상황에서 이벤트IgbTooltip를 트리거할 수 있습니다.

    Advanced Example

    이 도구는IgbTooltip 다른 컴포넌트와 원활하게 통합되어, 그 안에 컴포넌트를 포함하는 고급 툴팁을 만들 수 있습니다. 다음 예시에서는 ,그리고 컴포넌트를 사용하여IgbList​IgbAvatar​IgbIcon​IgbBadge​IgbButton​IgbCard​IgbCategoryChart 설명 툴팁을 만드는 방법을 볼 수 있습니다.

    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- 정중하게 설정하여 사용자가 대기 중일 때만 업데이트를 공지해야 함을 화면 리더에게 알립니다.

    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