概要
いやいや、vueでツールチップ作ろうと思えば簡単に作れるよね。
v-ifとか、detailsとか使えば余裕っすやん。
ってお思いの方は多いはず。
でも、難しいのが、
表示箇所以外をクリックした時に表示が消えるようにする。
そう、これが入ると一筋縄ではいかなくなるんよな。
（でもツールチップといえばこれはいれたい）
まあ、一旦ツールチップのコンポーネントを作っちゃえば、
それ使い回すんけど、そこまではいらないし、簡単に実装できちゃうやつが欲しい。
そんなことを思いながら、日々開発してたら、
うちのフロントエンドが作ってきたツールチップがかなりテクニカルやった。
（どっかで調べて拾ってきたんかな）
ちなみにtailwindとvueのgroup機能使ってる。
とりあえず、コードみてほしい。
（わかる人にはわかると思う）
<div class="group" tabindex="0">
<span>表示ボタン</span>
<div class="invisible opacity-0 group-focus:visible group-focus:opacity-100">
ここは表示させる中身
</div>
</div>
ワイ、これ見た時は「なんかよくわかんねー！まあいっか動いてるし笑」って思ってた。
しかしよく見ると@clickとかないし、内心どうやってるんやろ。。。とは思いながら、そのまま触れへんかってん。
でも今日、さっき、今、「やっぱツールチップ必要やんここ！」って場面があって、
彼が作ったツールチップの記述を紐解くことにした。
すると色々調べてて完全理解したあとに「なんやこれやべー！」
って感動してしまった。んで今これ書いてる。
仕様の説明
結論からいうと、
group-focusでフォーカスされてる時の状態で表示・非表示を切り替えてた。
vueのgroupやpeerの機能って、対象の状態によってその対象の子要素とか兄弟要素のcssを噛ませることができんねん。
だから今回のでいうと、class="group"のdivが対象で、
そいつのfocus/focus-outで、group-focusしてるdivの表示・非表示を切り替えてるって仕様。
さらに、ここが一番やるぅー！って思ったところなんやけど、
divとかspanってfocusできへんのよ。
なので、はじめ理解してないから、focusが効かなくて動かない。
そして、子要素のdivを無理やりlabelにしたりして悪いことしてる気分になった。笑
ここがミソでdivにtabindex="0"付けてfocusできるようにしてるねん。
やべー！
tabindexってあんま使わんし、使うとしてもキー操作できるようにする時くらいか。
まあなんにせよ、よく考えたなって思う。深く思う（だいぶ褒めてる）
ちなみにこの記述は装飾cssをあえて省いている説明用のタグなので、
使いたい人はお好みに装飾してください。
今回はtailwindでやったけど、
工夫したらチェックボックスのcheckedで判別して、labelやらfocus-withinやら使ったら
普通のcssでも実装できそうな気がするとかしないとか。