--- title: jsを使ったツールチップ(ピン止め可)をcssだけで実装する tags: CSS3 author: n_a slide: false --- 少し時間があったので数年前に作った管理画面のソースを眺めてたんですが 「あれ?このscript、全部cssでかけるんじゃね?」 「このscriptなくなれば、このページjqueryの読み込みいらないじゃん・・・」 ということがあり・・・ まぁ当時はあまりcssはそんなに明るくなくて・・・ゴニョゴニョ で、どんなscriptなのかというと **マウスを載せる(乗せる?)とツールチップが表示される** まぁよくあるアレですw 「バルーン」ですね。 ##仕様(一応) - マウスを載せるとツールチップを表示する。 - ツールチップに出ている文字をクリップボードにコピーできるようにツールチップをピン止めできるようにする - ピン止めしたツールチップは外すことができる こんな感じです。 ピン止めの方法はクリックにしました。 クリックすることでピン止めされ、ピン止めすると枠色を変化させて、ユーザはピン止めしているかを知る。 再クリックでピン止めが外され、枠色も戻る。 サンプルをざくっと作ったのでbefore-afterを全文載せときます。 細かい部分でミスがあったら見逃して下さいw (一応チェックしてますけど・・) ##Before - 画面 ![tooltip_before.png](https://qiita-image-store.s3.amazonaws.com/0/201928/fddf6911-a93d-e041-2803-05f348b4bf2d.png) - ソース ```html:before.html 自作ツールチップテスト

商品一覧


``` ##After - 画面 ![tooltip_after.png](https://qiita-image-store.s3.amazonaws.com/0/201928/b3f1f36c-4e07-010b-78c3-32b5f85a2552.png) beforeと同じかw - ソース ```html:after.html 自作ツールチップテスト

商品一覧


``` jqueryを外す前で、scriptをコメントアウトしてる状態です。 ##ポイントてきなもの 見えないチェックボックスを作って チェック状態の場合は表示、非チェック状態の場合は非表示 という感じになります。 ラベルを使ってチェックボックスする感じですかね。 ```html ~略~ input[type="checkbox"] { display: none; } input[type="checkbox"]:not(:checked) + .has_detail .detail_info { border-color: #fc6; display: none; } input[type="checkbox"]:not(:checked) + .has_detail:hover .detail_info { display: inline; } input[type="checkbox"]:not(:checked) + .has_detail:not(:hover) .detail_info { display: none; } input[type="checkbox"]:checked + .has_detail .detail_info { border-color: #f60; display: inline; } ~略~ ``` 追加したのはここの部分ですね。 あとはspanをlabelにしているだけになります。 ##最後に・・ ピン止め設定/解除のクリックがafterだとツールチップ上でも可能という 違いはありますが、こっちの方が使い勝手がよいので・・・ヨシとさせてくださいませ。 また、ツールチップ内の文字をコピペしやすいように 詳細表示とツールチップのブロックを少し重ねてあります。 以上、自分用メモですが皆さんのご参考になれば。