Clipsで、マウスをホバーするとツールチップでカラーコードを表示させる部分ですが、CSSだけでささっと実装しました。
マウス位置に応じてツールチップが移動するものもよく見られますが、今回はカラーコードをコピペできるようにしたかったので、表示される位置は固定されます。

この記事ではツールチップを実装するいくつかの方法を紹介します。

1.CSSでツールチップ実装

シンプルにCSSだけで実装する方法。
ツールチップをdisplay:none;にしておき、ツールチップを表示させる要素にマウスホバーするとdisplay:block;に変わる単純な仕組み。

ツールチップはホバーした要素の子要素になるので、ツールチップにマウスが乗った状態でも表示されつづけます。
(余白次第では親要素と子要素の間にスキマができてマウスが乗りませんが)

  • サンプル1のメニュー1
    ツールチップ1
  • サンプル1のメニュー2
    ツールチップ2
  • サンプル1のメニュー3
    ツールチップ3
  • サンプル1のメニュー4
    ツールチップ4

スタイルシート

HTML

2.CSS3でツールチップ実装

CSS3の間接セレクタを利用した方法です。
1. よりも要素がひとつ増えますが、アンカータグにツールチップをつけたいときにはこれでもいいかと。

ツールチップはホバーした要素と兄弟関係になるため、ツールチップにマウスが乗るとホバーはずれます。

  • サンプル2のメニュー1
    ツールチップ1
  • サンプル2のメニュー2
    ツールチップ2
  • サンプル2のメニュー3
    ツールチップ3
  • サンプル2のメニュー4
    ツールチップ4

スタイルシート

HTML

3.jQueryでツールチップ実装

JavaScriptではお馴染みJavaScriptライブラリ、jQueryで実装する方法を。(要 jQuery 1.9以上)

display:none;で要素を隠すのはちょっとなぁという方に。
ツールチップのテキストを扱うのにHTML5のカスタムデータ属性を使っています。HTML5の仕様といってもデータを取得するのにgetAttribute系の関数を使っているのでIE8でも動くと思われます。

  • サンプル3のメニュー1
  • サンプル3のメニュー2
  • サンプル3のメニュー3
  • サンプル3のメニュー4

スタイルシート

HTML

JavaScript

4.jQueryでツールチップ実装 その2

上のコードにマウスの動きにツールチップを追従させる仕様を加えたもの

親要素の position: relative;は不要になります。

  • サンプル4のメニュー1
  • サンプル4のメニュー2
  • サンプル4のメニュー3
  • サンプル4のメニュー4

スタイルシート

HTML

JavaScript

5.JavaScriptでツールチップ実装

3. の動作をプレーンなJavaScriptで実装

  • サンプル5のメニュー1
  • サンプル5のメニュー2
  • サンプル5のメニュー3
  • サンプル5のメニュー4

スタイルシート

HTML

JavaScript

※ 一部のJavaScriptがFirefoxで動作していませんでした。修正しました!