IgbGrid のヘッダーツールチップの内容を変更する方法についてご紹介します。

IgbGrid の設定

IgbGrid の IgbColumn 要素の Title プロパティを使用して、ヘッダーツールチップの内容を設定できます。
これにより、ヘッダー “氏名” にマウスカーソルを置いたときに表示されるツールチップの内容が更新されます。

<IgbColumn Header="氏名" 
           Title="Title プロパティよりツールチップの内容を変更します" 
           ....>
</IgbColumn>

同様に、HeaderTemplate の title 属性を使用して、ヘッダーツールチップの内容をカスタマイズすることもできます。
これにより、ヘッダー “年齢” にマウスカーソルを置いたときに表示されるツールチップの内容が更新されます。

<IgbColumn Header="年齢" ....>
  <HeaderTemplate>
      <span title="HeaderTemplate の title 属性よりツールチップの内容を変更します">
       @context.Column.Header</span>
  </HeaderTemplate>
</IgbColumn>

実行結果

上記の変更を適用した後、各ヘッダーにマウスカーソルを置くと、新しいツールチップの内容が表示されます。

関連ドキュメント

Tagged:

製品について

Ignite UI for Blazor