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;」で隠しています。
これでブラウザ上からは消えるけどスクリーンリーダーでは読めるという状態になります。

設置場所は
・headタグ下部に入れる
・bodyタグ下部に入れる
・bodyタグ上部に入れる

URLは
・ファイルを同サーバー上に設置する。
・Google等のCDNを指定する（//開始）。
・Google等のCDNを指定する（https://開始）。

レトロな方法は「headタグ下部に入れる」「ファイルを同サーバー上に設置する」の組み合わせで、モダンな方法は「bodyタグ下部に入れる」「Google等のCDNを指定する（https://開始）」の組み合わせになるが、単純にこの方法が良いとか悪いとかは言えない。

headタグ下部に入れる

bodyのコンテンツ読み込み前に読み込まれるので表示に必須なCSSファイルと同タイミングの読み込みになるのでコンテンツを表示するのが遅くなることになる事から最近は敬遠されがちだが、AJAXなどでコンテンツを読ませるなどサイトの描画にjQueryが必須な場合やコンテンツが重過ぎて読み込みを待ってくれないサイトでもアナライザーにはカウントさせたい時などは適している。

bodyタグ下部に入れる

bodyタグ下部に設置するとコンテンツを全て読み込んだ後にjQueryが動くようになり、コンテンツの表示スピードが上がる。
スクロールアニメーションやホバーアクションなどちょっとしたアクセントに使ってるだけの場合は最適だが重いサイトだとJavascriptの実行前に読み込みを中断される可能性もある。

bodyタグ上部に入れる

やってるサイトは少ないが、「なる早で」って感じの無難な結果になるという場所。

ファイルを同サーバー上に設置する。

普通で無難な方法、自分のサーバー上にあるのでGoogle様（CDNの配給元）が落ちても動作する。
自分の書いたスクリプトは必然的にこの方法になる。

Google等のCDNを指定する。

まずCDNというのはContents Delivery Networkの略で「サイト単体で考えるのではなく全サイト共通のファイルとして読み込ませればキャッシュが効いてサイトごとにjquery読まなくてもいいんじゃないの」という考えで生まれたもので超高速なサーバーからちゃんと圧縮転送される上にキャッシュはされてるって最強と思いきやjQueryくらいメジャーなライブラリだと効果はあるがバージョンが多数ありすぎるので長い目で見ると微妙だし、同じバージョンでも本家（jQuery CDN）、Google版（Google CDN）、Microsoft版（ASP CDN）等いくつかに分散されてるので100％マッチする訳では無く、キャッシュされてなければCDN側がいくら高速なサーバーを用意しても別サーバーのを読み込むとDNSの解決も必要になるので絶対的に良いとは言い切れない。
最悪サポートが切られる可能性もあるので長期的なサイトに使うには読み込み失敗したらローカルファイルを読むようにするといった配慮も必要だ。
色々ネガティブな事を書いたが「html5.js」とかバージョンアップされないものには適してるし、jQuery1.6.4のように超人気バージョンが再び現れ、多くの人がCDNを使うようになってくれたりると問題は無くなる。
あと、URLが「//開始」と「https://開始」があるがhttpやhttpsといったプロトコル表記の省略したURLを指定するとURLを記述したページのプロトコルが継承されるので便利だ。
ただ、ローカルファイルをIEで見ると挙動がおかしい（激重になる）ので、ついついローカルで見てしまう人はhttps://に決め打ちすると正常に動作する。もちろん無駄に暗号化するので理論上遅くなるが気になるほどではない。（逆にhttpsのページにhttpのスクリプトを読み込むとセキュリティ警告が出る）

Google検索などは「外部ファイルにせず全てHTMLに埋め込む」という方法を使っている。毎回同じデータを読ませられ無駄な気もするが、ごくまれに混雑してるサーバーでXSSやJSの読み込みに失敗して変になったりする、この手法を使うと画像も埋め込んでるので途中で通信が遮断されても描画に影響が無いというメリットもある。

色々書いたが結論は毎回考えるしか無い、jQueryの場合は古いブラウザも対応した1.x系と古いブラウザ切りスリム化した2.x系も悩むところだし、そもそもjQueryじゃなくJavascriptで書いた方がいい場合もあるしZeptoの方がいい場合もある。

clip-pathは先月の工夫のあるUIがいい！CSSで円・楕円・多角形などのクリップパスが簡単に作成できるオンラインサービス -Clippy | コリスで知ってから気にはなっていたが、firefoxが動かなかったので、まだまだ未来の技術だと思ってスルーしていたが、今回改めて調べるとclip-pathで指定するクリップパスはwebkit用の「CSSの直書き」とfirefox用の「SVG内部参照」「SVG外部参照」の3パターンの設定方法があるが、Clippyがwebkitにしか対応していないだけで、自前でSVGを用意してやると切り抜ける事が分った。（それでもIEは未対応だが）
LIGの人も書いてるが斜めに切り取った画像を並べると微妙に隙間が空く。そこで、あえて隙間を空けて斬る前のシーンの為に後ろに切り取ってない画像を用意した。その画像をずらして斬った風な感じを出してる。

LIG版は上下が切り離されてる感じになってたが、板を切った様に上部が崩れ落ちる風のアニメーションにした。
あと、LIG版はjQueryでアニメーションの開始終了を制御してるが、ごてごてするのでanimationのディレイで誤魔化した。

CSS

@keyframes slashSord {
  0%   {transform: translate3d(0,0,0);}
  100% {transform: translate3d(-640px,0,0);}
}

@keyframes slashUp{
  0%   {transform: translate3d(0,0,0) rotate(0deg);}
  70%  {transform: translate3d(-32px,24px,0) rotate(0deg);}
  75%  {transform: translate3d(-32px,24px,0) rotate(0deg);}
  100% {transform: translate3d(64px,540px,0) rotate(-80deg);}
}
@-webkit-keyframes slashSord {
  0%   {-webkit-transform: translate3d(0,0,0);}
  100% {-webkit-transform: translate3d(-640px,0,0);}
}

@-webkit-keyframes slashUp{
  0%   {-webkit-transform: translate3d(0,0,0) rotate(0deg);}
  70%  {-webkit-transform: translate3d(-32px,24px,0) rotate(0deg);}
  75%  {-webkit-transform: translate3d(-32px,24px,0) rotate(0deg);}
  100% {-webkit-transform: translate3d(64px,540px,0) rotate(-80deg);}
}

.zan img {
  position:absolute;
  top:0;
  left:0;
}
.zan img.ue {
  -webkit-clip-path: polygon(0 479px,639px 0,0 0);
  clip-path: url("#clipPolygon7");
  -webkit-animation: slashUp 3.5s ease 2s both;
  animation: slashUp 3.5s ease 2s both;
}
.zan img.all {
  -webkit-animation: slashSord 0.25s ease 1.5s both;
  animation: slashSord 0.25s ease 1.5s both;
}
.zan img.shita {
  -webkit-clip-path: polygon(0 480px,640px 0,640px 480px);
  clip-path: url("#clipPolygon3");
}

.zan {
  position:relative;
  margin:90px auto;
  width:640px;
  height:480px;
  overflow:hidden;
}

HTML

<div class="zan"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00SWFGK1I/ref=nosim" target="_blank">
<img src="http://ecx.images-amazon.com/images/I/81kVL7QeoxL._SL1500_SR640,480_.jpg" alt="" class="all" />
<img src="http://ecx.images-amazon.com/images/I/81kVL7QeoxL._SL1500_SR640,480_.jpg" alt="" class="ue" />
<img src="http://ecx.images-amazon.com/images/I/81kVL7QeoxL._SL1500_SR640,480_.jpg" alt="リンゴ" class="shita" />
</a></div>
<svg width="0" height="0">
<clipPath id="clipPolygon7">
<polygon points="0 479,639 0,0 0"></polygon>
</clipPath>
<clipPath id="clipPolygon3">
<polygon points="0 480,640 0,640 480"></polygon>
</clipPath>
</svg>

できたアニメーションが「リンゴを斬る！」