igxTooltip の表示位置を制御する

Ignite UI for Angular 11.1.10 バージョン時点での情報に基づいています。

igxTooltip では、overlaySettings プロパティを利用することでツールチップの表示位置を制御することができます。ConnectedPositioningStrategy に、ツールチップの縦横の表示方向、開始位置を指定します。

<div class="parent"
  [igxTooltipTarget]="tooltipRef"
  [overlaySettings]="tooltipOverlaySettings">
  ここでマウスホバー
</div>
<div #tooltipRef="tooltip" igxTooltip>ツールチップ</div>

tooltipOverlaySettings : OverlaySettings = {
  positionStrategy: new ConnectedPositioningStrategy({
    horizontalDirection: HorizontalAlignment.Right,//表示の方向
    horizontalStartPoint: HorizontalAlignment.Right,//表示の開始位置
    verticalDirection: VerticalAlignment.Top,//表示の方向
    verticalStartPoint: VerticalAlignment.Top//表示の開始位置
  })
};