Web Components Tooltip | インフラジスティックス

Components List

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

次に、以下のように、IgcTooltipComponent とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

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 の完全な概要については、作業の開始トピックを参照してください。

使用方法

ツールチップターゲット

目的の要素にツールチップを添付するには、<igc-tooltip> 要素の anchor プロパティを使用します。このプロパティは、要素 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

要素インスタンスを直接渡すことでターゲットを指定することもできます。

<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

ツールチップのコンテンツ

ツールチップのコンテンツは、<igc-tooltip> 要素の開始タグと終了タグの間にカスタムコンテンツを配置することによって定義されます。

<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

この例では、スロット化されたコンテンツ「I will be shown!」が message プロパティ値の代わりに表示されます。

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 を表示および非表示にする前の遅延を制御する場合は、showDelay プロパティと hideDelay プロパティを使用できます。どちらのプロパティも、時間をミリ秒単位で表す数値を受け入れます。

<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 はターゲット要素の上に配置されます。

さらに、sticky プロパティを使用して IgcTooltipComponent を固定することができます。これにより、閉じるボタンが追加され、ユーザーが閉じるボタンをクリックするか、Esc キーを押して手動で閉じるまで、IgcTooltipComponent が表示されたままになります。この動作はデフォルトのホバー動作をオーバーライドし、ユーザーがターゲット要素上でホバーを停止したときに 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 はターゲット要素の上にマウスを移動したときにのみトリガーされます。ただし、showTriggers プロパティと hideTriggers プロパティを使用してこの動作を変更し、IgcTooltipComponent が表示されるタイミングと消えるタイミングを制御できます。これらのプロパティは、click、focus、keypress などのイベント名を値として受け入れ、さまざまなシナリオで 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`	boolean	ツールチップの表示/非表示を決定します。
`disableArrow`	boolean	true に設定すると、ツールチップの矢印インジケーターが無効になります。
`offset`	number	ツールチップとその `anchor` 間のピクセル距離を設定します。

メソッド

構成可能なプロパティに加えて、IgcTooltipComponent では次の 3 つのメソッドも使用できます。

名前	説明
`show`	ツールチップが表示されていない場合は表示します。ターゲットが指定されている場合は、ターゲットを一時的な `anchor` として設定します。
`hide`	ツールチップがまだ非表示になっていない場合は非表示にします。
`toggle`	ツールチップの表示状態と非表示状態を切り替えます。

アクセシビリティと ARIA サポート

IgcTooltipComponent はアクセシビリティを考慮して構築されており、次の ARIA 属性が含まれています。

role - ツールチップがデフォルトの動作になっている場合、role="tooltip" が適用されます。sticky プロパティが有効な場合、ロールは status に変更されます。
inert - 可視性に基づいて動的に切り替えられます。ツールチップが非表示になると、ツールチップは非アクティブになります。
aria-atomic - true に設定すると、ツールチップのコンテンツ全体が変更時に通知されるようになります。
aria-live - polite に設定して、ユーザーがアイドル状態のときにのみ更新を通知することをスクリーンリーダーに示します。

スタイル設定

IgcTooltipComponent コンポーネントは、スタイル設定に使用できる 2 つの CSS パーツを公開します。

名前	説明
`base`	ツールチップコンポーネントの基本ラッパー。
`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

Web Components Tooltip (ツールチップ)

Ignite UI for Web Components Tooltip の例

作業の開始

使用方法

ツールチップターゲット

ツールチップのコンテンツ

設定の表示/非表示

配置

トリガー

追加のプロパティ

メソッド

アクセシビリティと ARIA サポート

スタイル設定

API リファレンス

その他のリソース

Web Components Tooltip (ツールチップ)

Ignite UI for Web Components Tooltip の例

作業の開始

使用方法

ツールチップ ターゲット

ツールチップのコンテンツ

設定の表示/非表示

配置

トリガー

追加のプロパティ

メソッド

アクセシビリティと ARIA サポート

スタイル設定

API リファレンス

その他のリソース

ツールチップターゲット