Blazor：テーブルのセルにTooltipsを設定する

C#

テーブルで長い文字を表示する場合、すべて表示してしまうとデザインなどが崩れてしまいます。そのため、表示する文字列を一定の長さで制限します。そして、該当のセルをマウスオーバーした際に、すべての文字列を表示させたいと思います。

前提

以下の環境で実行しています。

oswindows11
dotnet8.0.304
UIBlazor（WebAssembly standalone）
IDEVisual Studio 2022 Community
Bootstrap5.3.3

本記事に記載しているソースコードは説明に必要な個所のみ抜粋していること、ご了承ください。

また、Blazorプロジェクト（Bootstrap導入済み）は作成済みであることを前提としています。

事前準備

BootstrapのTooltipsページに記載されている通り、tooltipsを利用するためには、初期化が必要になります。4行目は、tooltipsの動作に必要なjavascriptを読み込んでいます。5行目からが初期化に必要な設定です。

@* index.html *@
<body>
・・・
    <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
    <script >
        function addTooltips() {
            const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
            const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

        }
    </script>
</body>

Tooltipsのページには、7、8行目の2行だけを記載すればよいとありました。しかし、それだとうまくいかなかったため、関数として設定しています。そしてBlazorコンポーネントであとからこの関数を呼び出します。

表示する文字を制限する

表示する文字列は、テーブルのセルの幅で変化します。そのため特別な設定をしなくても自動的に幅に合わせて表示される文字数が制限されることになります。しかし、そのままでは文字が途中で切れているのか、それともちょうど収まっているのかが分かりづらくなります。

そこで、「text-truncate」をclassに設定します。

<div class="mt-5 container-fluid">
	<div class="row">
		<div class="col">
			<table class="table table-striped table-hover">
				<thead class="table-dark">
					<tr class="d-flex">
						<th scope="col" class="col-2">Id</th>
						<th scope="col" class="col-2">Name</th>
						<th scope="col" class="col-2">Address</th>
						<th scope="col" class="col-2">Phone</th>
					</tr>
				</thead>
				<tbody class="table-group-divider">
					@foreach (var person in People)
					{
						<tr class="d-flex">
							<td class="col-2">@person.Id</td>
							<td class="col-2">@person.Name</td>
							<td class="col-2">@person.Address</td>
							<td class="text-truncate col-2">@person.Phone</td>
						</tr>
					}
				</tbody>
			</table>
		</div>
	</div>
</div>

Id列には何も設定せず、Address列に「text-truncate」を設定しています。文字が見切れる場合に、「…」が表示されるため、視覚的に分かりやすくなります。

Tooltipsの設定

まずは、テーブルのセルにtooltipsの設定を追加します。

具体的には以下のように、「data-bs-toggle」と「data-bs-title」の2つの属性を追加します。「data-bs-toggle」には「tooltips」という値を設定します。これは、index.htmlの7行目で指定している値と同じものを指定します。「data-bs-title」には表示させたい文字を指定します。

<td class="col-2 text-truncate" data-bs-toggle="tooltip" data-bs-title="@person.Address">@person.Address</td>

index.htmlに追加した関数の呼び出し

レンダリングされた後に、index.htmlに追加した「addTooltips関数」を呼び出す処理を追加します。追加する場所は、レンダリング後に呼ばれる「OnAfterRenderAsync」です。

@inject IJSRuntime js

protected override async Task OnAfterRenderAsync(bool firstRender)
{
	await js.InvokeVoidAsync("addTooltips");
}

これで、以下のようにセルにマウスオーバーすることで、フルテキストが表示されるようになります。

tooltipsの初期化について

Tooltipsのページには、以下の2行を追加する記載があります。しかし、それだけだと正常に動作しません。以下の処理がUIがレンダリングされる前に走ってしまうため、うまく初期化できないようです。

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

そのため、レンダリング後に初期化するように、Blazorコンポーネントから呼び出す処理を追加しました。

なお、以下のように「firstRender」の時だけ実行するようにしてしまうと、後からテーブル内容が動的に変わった場合、変わった部分でtooltipsが表示されなくなります。

protected override async Task OnAfterRenderAsync(bool firstRender)
{
	if (firstRender)
	{
		await js.InvokeVoidAsync("addTooltips");
	}
}

初期表示後に追加した5行目のAddressのセルをマウスオーバーしても、tooltipsが表示されていないことが分かります。そのため、レンダリングし直すたびに、tooltipsの初期化を実行する必要があります。

コメント