トグル要素がオーバーレイ コンテナーに追加された後にイベントを発生します。
onAppended() {
alert("Content appended!");
}
<div
igxToggle
(appended)='onToggleAppended()'>
</div>
トグル コンテナーが閉じた後にイベントを発生します。
onToggleClosed(event) {
alert("Toggle closed!");
}
<div
igxToggle
(closed)='onToggleClosed($event)'>
</div>
トグル コンテナーが閉じた前にイベントを発生します。
onToggleClosing(event) {
alert("Toggle closing!");
}
<div
igxToggle
(closing)='onToggleClosing($event)'>
</div>
ツールチップに関連するデータを取得または設定します。 'context' は、ツールチップで作業する際のアクセスに必要な情報の保管に使用されます。
// get
let tooltipContext = this.tooltip.context;
// set
this.tooltip.context = "Tooltip's context";
ツールチップの識別子です。 このプロパティが明示的に設定されていない場合、自動的に生成されます。
let tooltipId = this.tooltip.id;
トグル コンテナーが開かれた後、イベントを発生します。
onToggleOpened(event) {
alert("Toggle opened!");
}
<div
igxToggle
(opened)='onToggleOpened($event)'>
</div>
トグル コンテナーが開いた前にイベントを発生します。
onToggleOpening(event) {
alert("Toggle opening!");
}
<div
igxToggle
(opening)='onToggleOpening($event)'>
</div>
ツールチップの矢印要素を取得します。
let tooltipArrow = this.tooltip.arrow;
コンテンツがレンダリングされるオーバーレイの ID を返します。
this.myToggle.overlayId;
ツールチップの role 属性を取得します。
let tooltipRole = this.tooltip.role;
トグルを閉じます。
this.myToggle.close();
トグルを再配置します。
this.myToggle.reposition();
対応する軸に沿ってコンテンツを指定された量だけオフセットします。オフセット モードは、OffsetMode.Add および OffsetMode.Set を使用してオフセット値を追加するか (デフォルト)、設定するかを決定します。
Ignite UI for Angular Tooltip - ヘルプ
Ignite UI for Angular Tooltip ディレクティブは、ツールチップとして動作する要素としてマークアップで HTML 要素をマークするために使用されます。 ツールチップは、エクスポートしたツールチップを個別のターゲット セレクター プロパティに割り当てて Ignite UI for Angular Tooltip Target と組み合わせて使用します。
例: