ASP .NET Core Tips - Tooltipの表示

概要

ASP .NET CoreでWebアプリを作っているときに、
Tooltipがうまく表示されなくて調べた内容の備忘録。

環境

Visual Studio 2022（Version 17.11.2）
ASP .NET Core
.NET 8

やりたかったこと

ラベルタグのマウスホバーで、以下のページにあるようなツールチップを表示したい。
https://getbootstrap.jp/docs/5.3/components/tooltips/

調べたこと

上記のWebページに書いてある通りにしてみたつもりなのに、
Titleプロパティを入れた時の普通のTooltipで表示される・・・。

一旦、ASP .NET Coreベースのプロジェクトで使用されているBootstrapのバージョンを調べてみる。
bootstrap.jsの先頭には以下のように書かれていた。

/*!
  * Bootstrap v5.1.0 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */

ブラウザの開発者モードで見てみると、
JavaScriptの部分で「bootstrap is not defined」となっていた。

上記のページでは、以下のように書いてと指示されている。

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

WebページのScriptタグ内に上記を書いているけど、単純にそれだと動かない。
Scriptタグにtype属性を使って「module」を指定する必要があるとのこと。
⇒https://stackoverflow.com/questions/75868787/tooltip-bootstrap-5-2-5-3-still-not-working-in-my-end

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