エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
ホバー表示のツールチップを独自データ属性とCSSだけで作る方法
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
ホバー表示のツールチップを独自データ属性とCSSだけで作る方法
オリジナルのPocketボタンを作る方法を紹介したときに、チラッと触れていたツールチップの作り方をまと... オリジナルのPocketボタンを作る方法を紹介したときに、チラッと触れていたツールチップの作り方をまとめました。 jQueryは一切使わず、シンプルなHTMLとCSSだけで実装する方法です。いろいろと応用が効くので覚えておいても損はないと思いますよ。 CSSだけでツールチップを実装する手法というのは、ググればたくさん出てくるんですが、その多くのHTML構造は以下のような感じになっています。 <a href="https://www.google.co.jp/" target="_blank">Google<span>ここにツールチップの内容</span></a> ツールチップとして表示したいテキストを<span>要素で囲み、通常時はdisplay:none;にして、hover時のみ表示するという方法ですね。 今回僕が紹介する方法では<span>要素は使いません。 「ならツールチップに表示す