https://uda2.com/testbox/tooltip.html

一般的なツールチップと同じくリンク文字にホバーしたら開閉します。
アイコンをクリックするとトグル式で開閉します。
※上のサンプルはHTMLやCSS（アイコンも含む）をしょうよう個人問わず勝手に使ってOKです。

まず、「そういえばツールチップってアクセシビリティ的に使えないよなー」と思って検索してたら。
クリックで表示させる方法の比較について書かれてたツイートを見かけたのですが、ホバー式のメリットに「cssだけで作ることができる」と書かれてたのに触発され「今ならクリック式も出来そうやな」とやってみた。

label.htooltip {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23F00;stroke-width:0px;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class=%22cls-1%22 points=%228.02 16 5.98 12.96 10.06 12.96 8.02 16%22/%3E%3Cpath class=%22cls-1%22 d=%22M14.7,0H1.3C.58,0,0,.58,0,1.3v10.4c0,.72.58,1.3,1.3,1.3h13.4c.72,0,1.3-.58,1.3-1.3V1.3c0-.72-.58-1.3-1.3-1.3ZM13.1,5.76l-1.25,1.25-.03-.03c-.21.06-.65-.13-1.18-.52l-1.69,3.87h0s0,0,0,0c-.25.25-1.12-.22-2.1-1.06l-2.45,1.69s-.19-.06-.34-.21c-.15-.15-.24-.3-.21-.34l1.69-2.45c-.84-.98-1.31-1.85-1.06-2.1,0,0,0,0,.01,0h0s3.87-1.7,3.87-1.7c-.39-.53-.58-.97-.52-1.18l-.03-.03,1.25-1.25c.26-.26,1.38.43,2.5,1.55,1.12,1.12,1.81,2.24,1.55,2.5Z%22/%3E%3C/svg%3E") center center no-repeat;
    background-size: contain;
    filter: saturate(0%);
}
label.htooltip:has(input[type="checkbox"]:checked) {
    filter: saturate(100%);
}
label.htooltip p,
label.htooltip p::before {
    position: absolute;
    left: 50%;
    display: block;
    background-color: #212121;
}
label.htooltip p {
    margin: 0;
    padding: 7px;
    font-size: 12px;
    line-height: 1.2em;
    color: #fff;
    border-radius: 3px;
    width: 100px;
    bottom: calc(100% + 10px);
    box-sizing: border-box;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translate(-50%, 10px);
    transition: transform .3s ease-in-out,opacity .3s ease-in-out;
    pointer-events: none;
}
label.htooltip p::before {
    content: "";
    bottom: -10px;
    width: 14px;
    height: 10px;
    clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
    transform: translate(-50%, 0);
}
label.htooltip>input[type="checkbox"] {
    display: none;
}
label.htooltip {
    opacity: 1;
}
label.htooltip:has(input[type="checkbox"]:checked) p {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}
@media (hover: hover) or (pointer: fine) {
    label.htooltip:hover {
        filter: saturate(100%);
    }
    label.htooltip:has(input[type="checkbox"]:checked):hover {
        opacity: 0.8;
    }
    a:hover+label.htooltip p,
    label.htooltip:hover p {
        transform: translate(-50%, 0);
        opacity: 1;
        pointer-events: auto;
    }
}

<a href="https://uda2.com/blog/css_tooltip/">リンクテキスト</a>
<label class="htooltip" aria-label="ツールチップ"><input type="checkbox"><p>ここにツールチップの内容を書く</p></label>

設置はソースのCSSをコピペした上で、ToolTipを付けたいリンクのタグのそばに「<label class=”htooltip” aria-label=”ツールチップ”><input type=”checkbox”><p>ここにツールチップの内容を書く</p></label>」と書いてください。
近くに複数のリンクがある場合は各リンクとlabelのセットを何かしらで括ってください。

一般的なツールチップと同じくリンク文字にホバーしたら開閉します。
アイコンをクリックするとトグル式で開閉します。

ホバーのアクションを入れるとスマホでの挙動がおかしくなるのでメディアクエリ「@media (hover: hover) or (pointer: fine)」でパソコンでのみホバーアクションをするようにしています。

アクセシビリティにも配慮する為にvisibility:hidden;を使わずに「opacity: 0;」と「pointer-events: none;」で隠しています。
これでブラウザ上からは消えるけどスクリーンリーダーでは読めるという状態になります。

一応せっかく書いたので載せておくことにします。

.toggle { box-sizing: border-box;color: #fff;background-color: #ccc; width: 85px; height: 32px; border-radius: 5px; overflow: hidden; position: relative; display: inline-flex; align-items: center; flex-shrink: 0; user-select: none; vertical-align: middle; margin: 0;}
.toggle:has(>input:checked) { opacity: 1; background-color: #357ed1;}
.toggle input {display:none;}
.toggle::before,.toggle::after { display: block; position: absolute; z-index: 2; line-height: 100%; width: calc(100% - 32px - 3px); text-align: center;}
.toggle::before {content: 'オン';opacity: 0;left: 3px;}
.toggle::after {content: 'オフ';opacity: 1;right: 3px;}
.toggle:has(>input:checked)::before { opacity: 1;}
.toggle:has(>input:checked)::after { opacity: 0;}
.toggle .switch { background-color: #fff; display: block; height: 100%; position: absolute; right: 0; z-index: 3; box-sizing: border-box; transition: right 150ms linear, border-color 150ms linear; width: 32px; border-radius: 5px; border: 3px solid #ccc; right:calc(100% - 32px); }
.toggle:has(>input:checked) > .switch { border-color: #357ed1; right: 0; }
.onoff .switch {color: #999; border: 1px solid #999; display: inline-block; padding: 3px 5px; line-height: 1.2;}
.onoff input {display:none;}
.onoff .switch::after { content: 'オフ'; display: inline; }
.onoff input:checked + .switch {color: #357ed1; border-color: #357ed1;}
.onoff input:checked + .switch::after {content: 'オン';}

<label class=""><input checked="" type="checkbox" id="editmode"><span class="switch"></span></label>
<label class="toggle"><input checked="" type="checkbox" id="editmode"><span class="switch"></span></label>
<label class="onoff"><input checked="" type="checkbox" id="editmode"><span class="switch"></span></label>

できあがりは下の通りです。

左から「無加工なチェックボックス」「:has()を使ったトグルボタン」「hasが使えないのでとりあえず同じHTMLでオンオフ切り替えれるようにだけしたもの」となっています。

追伸
firefoxも2023年12月19日以降「:has()」が使えるようになったもようです。

制作当時はそれほどスマホも浸透しておらず、スマホの前身であるWindows mobileなどが不人気だったことから「日本ではスマホよりもモバイルゲーム機でネットを見る時代が来るのでは？」と謎な発想でモバイルゲーム機でも見れる横幅で作成してましたのですが、一般的なサイズにしました。

公式サイトではあるので奇抜にはしたくないですが技術的デモンストレーションという面もありますので要所で変態的なコーディングになっています。

前回謎に一番力を入れてた「制作所について」の名前の部分は元々canvasにJavascriptでゴリゴリに描画していました、今回、デザインはそのままにCSSで動かしています。
ちなみにコレは大昔にパソコンショップで展示してたCD-ROM（木原庸佐さん？）の動きをパクってます。（うろ覚えですが）

トップページのメインビジュアルはクリップされた背景が幅100％になって影を落としています。あまり無いレイアウトになってるかと思います。

ページ遷移のアニメーションはよく使われるのが上に絵や色を被せて一端見えなくするのが一般的ですがそれだとイージーなのでディゾルブしてます。

テキストはChatGPTさんの協力のもと作成しております。

下の方にあるお問い合わせボタンはホバー時にグラデーションを回転させています。（線が細いのでほぼ視認できませんが）

フッターの看板犬はCSSに追加されたが使い道の難しい三角関数を使って扇状に並べています。

あと余り好きでは無いのですが今カーソルに追随する円形のオブジェクトが流行ってるみたいなので付けておきました。普通に追随しても面白くないので3段階で追随する感じにしています。

他の場所も作り直してはいるのですが元々個人的に気に入ってるので基本的なデザインの方向性は残したままにしています。

> ruby -v
ruby 2.2.1p85 (2015-02-26 revision 49769) [x64-mingw32]

rubyのパッケージングシステムgemでsassをインストールするが、gemをアップデートする。
ウチの場合2.4.5から2.4.6になった。

> gem -v
2.4.5
> gem i rubygems-update
> update_rubygems
> gem pristine --all
> gem -v
2.4.6

SASSをインストールする。同時にSCSSでも利用出来るようになる。

> gem install sass
> sass -v
Sass 3.4.13 (Selective Steve)
> scss -v
Sass 3.4.13 (Selective Steve)

次にSASSにフォルダを監視するにはコマンドプロンプトで任意のWEBルートフォルダに移動して

> sass --watch css --style compact --sourcemap=none --cache-location %USERPROFILE%/.sass-cache

と打ち込めば監視がスタートし、「Ctrl＋C」で停止する。
コマンドは
–watch cssは監視するフォルダ名の指定で、私の場合入力フォルダも出力フォルダも同じなので一つだけど分けてる人はscss:cssという感じに入力フォルダと出力フォルダをコロンで区切ればOKだし、scssファイルが一つしか無い場合は「style.scss:style.css」という風にファイル名を指定する事も出来る。
–style compactの部分は圧縮方法でnested、expanded、expanded、compressedの順にコンパクトになる。
–sourcemap=noneは最近のSassはSource Mapsというデバッグ用のファイルが自動で作成されます。これはFirefoxのFirebugやChromeのDeveloper Toolsで「CSSの行数言われても」って時にSCSSの行数を表示してもらえるように目次が書かれたファイルです、今回は小規模サイトで別にいらないのでnoneを指定して生成しないようにしています。
–cache-location %USERPROFILE%/.sass-cacheはSASSがコンパイルを高速処理するために生成される「.sass-cache」フォルダの場所を設定する。この場合はユーザープロファイルフォルダにまとめる感じになってる。（もしも複数サイトを運営していても「.sass-cache」フォルダ内にハッシュ名のフォルダが作られるので重複する心配は無い。）「–no-cache」として削除する事も出来る

実際に監視を開始しSCSSを書き換えてみると
Decode error – output not utf-8
とエラーが出てコンパイルに失敗した。
どうもrubyの奴に文字コードを知らせてやらないとエラーが出るらしい

> set RUBYOPT=-EUTF-8

を実行した後に実行すれば正常にコンパイルされた。

いちいち、任意のフォルダに移動してコマンドを打ち込むのも面倒なのでバッチファイルを作る事にします。
下記の内容をwatch.batというファイル名でWEBルートに置く。

cd /d %~dp0
set RUBYOPT=-EUTF-8
sass --watch css --style compact --sourcemap=none

新しく出た1行目は実行するフォルダに移動（/dでドライブも移動）
これで今後は「watch.bat」をダブルクリックするだけで監視がスタートする。
SASSの方はMixinが用意されたCompassを使う方法もあるが使わないベンダープレフィックスがウザイし、Sublime Textのビルドコマンドを使えるようにしたり出来るがいちいちビルドするのが面倒なので、現在はSASSをバッチ機能で監視させる方法に落ち着いてます。

あとはjavascriptのminify（最小化）の方だが最小化も色々ソフトがあるがuglify-jsを使ってみることにした。
既にNode.jsがインストールしてるのでnode.jsのパッケージングシステムnpmでインストールするとすぐに使える。

> npm install -g uglify-js

ポイントは -gを付けてコマンドプロンプトからダイレクトに操作可能にしてる所です。
（もちろん、複雑な動作をさせたい場合はコマンドプロンプトを使わずスクリプトを書いてnode.js経由でuglify-jsで動作をさせる事も可能です。）

個人的に、min無しがDevelopment（開発用）minありがDistribution（公開用）という使い方をしていてjavascriptを最小化は公開直前にするだけだが、それでもコマンドを入力するのは面倒なのでバッチファイルを作った。
下記の内容をjs-min.batというファイル名で保存。

cd /d %~dp0
uglifyjs -c -m -o js\common.min.js js\common.js

-c 圧縮率高めにする。
-m 変数名とかも短縮する。
-o js\common.min.jsは出力ファイルの指定です。
Sassの所で書いたSource Mapを使いたい場合は「–source-map js\common.js.map」とすればOK。
これで「js-min.bat」をダブルクリックするだけで最小化される。

この角が欠けた表現をする仕組みは背景を4分割してそれぞれの角に透明から急に色が付くグラデーションを塗って角が欠けた表現をしているので、背景もうまく透過している。
ただ、元のCSSだときれいに4等分（縦横50％）しすぎで要素の幅や高さが奇数の場合に隙間があいてしまっていたので、ジェネレーターでは縦横51％にして少しかぶせて隙間が現れ無いようにしています。

■IEでリストに空行が入る問題
リストに「width:100%;」と幅をしていしてやると回避できるがMacのIEでリストが膨張してレイアウトが崩れる場合があるので98%ぐらいが安心
■FireFoxで印刷時に落ちる（フリーズする）問題
意味は不明だけど問題の箇所のフロートの親に「overflow: auto;」と指定してやると回避できる
ただし、他のブラウザ（WinIE5.xやNetScape）でスクロールバーが表示されてしまう場合があるので印刷時にのみ適用される様に「@media print」を使う。
■NetScape7で背景が上に上がってしまう問題
背景の位置を指定するにあたって左揃えの場合はそれを明示すると背景が飛んでしまうらしく
background : #FFF url(../images/test.gif) no-repeat bottom ;
の様に横の位置情報を入れないようにすると上手く表示される。
■NetScape7でフロートが閉じてくれない問題
同じくNetScape7のフロートの問題なんだけどクリア用に用意したdivに大きさが無いと無視される様で高さを1px与えてやると問題を回避できる。
ただそうするとwinIE6.0で変になる場合があるのでハックで回避
html>body .clear {height:1px;}