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

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

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

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

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

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

スタイルシート

#sample1 li {
  position:relative;
}
#sample1 li:hover {
  background: #deb3ba;
}
.sample1-tooltips {
  display: none;
  position: absolute;
  bottom: -2.8em;
  left: 0.3em;
  z-index: 9999;
  padding: 0.3em 0.5em;
  color: #FFFFFF;
  background: #c72439;
  border-radius: 0.5em;
}
.sample1-tooltips:after {
  width: 100%;
  content: "";
  display: block;
  position: absolute;
  left: 0.5em;
  top: -8px;
  border-top:8px solid transparent;
  border-left:8px solid #c72439;
}
#sample1 li:hover .sample1-tooltips {
  display: block;
}

HTML

<ul id="sample1">
  <li>サンプル1のメニュー1<div class="sample1-tooltips">ツールチップ1</div></li>
  <li>サンプル1のメニュー2<div class="sample1-tooltips">ツールチップ2</div></li>
  <li>サンプル1のメニュー3<div class="sample1-tooltips">ツールチップ3</div></li>
  <li>サンプル1のメニュー4<div class="sample1-tooltips">ツールチップ4</div></li>
</ul>

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

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

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

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

スタイルシート

#sample2 li {
  position:relative;
}
#sample2 li:hover {
  background: #deb3ba;
}
.sample2-tooltips {
  display: none;
  position: absolute;
  bottom: -2.8em;
  left: 0.3em;
  z-index: 9999;
  padding: 0.3em 0.5em;
  color: #FFFFFF;
  background: #c72439;
  border-radius: 0.5em;
}
.sample2-tooltips:after {
  width: 100%;
  content: "";
  display: block;
  position: absolute;
  left: 0.5em;
  top: -8px;
  border-top:8px solid transparent;
  border-left:8px solid #c72439;
}
#sample2 div:hover~.sample2-tooltips {
  display: block;
}


HTML

<ul id="sample2">
  <li><div>サンプル2のメニュー1</div><div class="sample2-tooltips">ツールチップ1</div></li>
  <li><div>サンプル2のメニュー2</div><div class="sample2-tooltips">ツールチップ2</div></li>
  <li><div>サンプル2のメニュー3</div><div class="sample2-tooltips">ツールチップ3</div></li>
  <li><div>サンプル2のメニュー4</div><div class="sample2-tooltips">ツールチップ4</div></li>
</ul>

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

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

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

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

スタイルシート

#sample3 li {
  position:relative;
}
#sample3 li:hover {
  background: #deb3ba;
}
.sample3-tooltips {
  position: absolute;
  bottom: -2.8em;
  left: 0.3em;
  z-index: 9999;
  padding: 0.3em 0.5em;
  color: #FFFFFF;
  background: #c72439;
  border-radius: 0.5em;
}
.sample3-tooltips:after {
  width: 100%;
  content: "";
  display: block;
  position: absolute;
  left: 0.5em;
  top: -8px;
  border-top:8px solid transparent;
  border-left:8px solid #c72439;
}

HTML

<ul id="sample3">
  <li data-text="ツールチップ1">サンプル3のメニュー1</li>
  <li data-text="ツールチップ2">サンプル3のメニュー2</li>
  <li data-text="ツールチップ3">サンプル3のメニュー3</li>
  <li data-text="ツールチップ4">サンプル3のメニュー4</li>
</ul>

JavaScript

$("#sample3 li").on({
  'mouseenter':function(){
    var text = $(this).attr('data-text');
    $(this).append('<div class="sample3-tooltips">'+text+'</div>');
  },
  'mouseleave':function(){
    $(this).find(".sample3-tooltips").remove();
  }
});

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

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

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

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


スタイルシート

#sample4 li {
/*  position:relative; */
}
#sample4 li:hover {
  background: #deb3ba;
}
.sample4-tooltips {
  display: block;
  position: absolute;
  z-index: 9999;
  width: auto;
  height: auto;
  padding: 0.3em 0.5em;
  color: #FFFFFF;
  font-size: 1.4em;
  background: #c72439;
  border-radius: 0.5em;
}
.sample4-tooltips:after {
  width: 100%;
  content: "";
  display: block;
  position: absolute;
  left: 0.5em;
  top: -8px;
  border-top:8px solid transparent;
  border-left:8px solid #c72439;
}

HTML

<ul id="sample4">
  <li data-text="ツールチップ1">サンプル4のメニュー1</li>
  <li data-text="ツールチップ2">サンプル4のメニュー2</li>
  <li data-text="ツールチップ3">サンプル4のメニュー3</li>
  <li data-text="ツールチップ4">サンプル4のメニュー4</li>
</ul>


JavaScript

$("#sample4 li").on({
  'mouseenter':function(ev){
    var top = $(this).position().top;
    var left = $(this).position().left;
  top = Math.floor(top); // Fx対策:整数にする
  left = Math.floor(left); // Fx対策:整数にする
    var text = $(this).attr('data-text');
    $("body").append('<div id="sample4-tooltips-'+top+'-'+left+'" class="sample4-tooltips">'+text+'</div>');
    var obj = $("#sample4-tooltips-"+top+"-"+left);
    var x = ev.pageX;
    var y = ev.pageY;
    obj.css({top: y + 34, left: x + 14}); // ← 表示する位置を適当に調整
  },
  'mousemove':function(ev){
    var top = $(this).position().top;
    var left = $(this).position().left;
  top = Math.floor(top); // Fx対策:整数にする
  left = Math.floor(left); // Fx対策:整数にする
    var obj = $("#sample4-tooltips-"+top+"-"+left);
    var x = ev.pageX;
    var y = ev.pageY;
    obj.css({top: y + 34, left: x + 14});
  },
  'mouseleave':function(){
    var top = $(this).position().top;
    var left = $(this).position().left;
  top = Math.floor(top); // Fx対策:整数にする
  left = Math.floor(left); // Fx対策:整数にする
    $("#sample4-tooltips-"+top+"-"+left).remove();
  }
});


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

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

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

スタイルシート

<style>
#sample5 li {
 position: relative;
}
#sample5 li:hover {
 background: #deb3ba;
}
.sample5-tooltips {
 display: block;
 position: absolute;
 bottom: -2.8em;
 left: 0.3em;
 z-index: 9999;
 width: auto;
 height: auto;
 padding: 0.3em 0.5em;
 color: #FFFFFF;
 background: #c72439;
 border-radius: 0.5em;
}
.sample5-tooltips:after {
 width: 100%;
 content: "";
 display: block;
 position: absolute;
 left: 0.5em;
 top: -8px;
 border-top:8px solid transparent;
 border-left:8px solid #c72439;
}
</style>


HTML

<ul id="sample5">
<li data-text="ツールチップ1">サンプル5のメニュー1</li>
<li data-text="ツールチップ2">サンプル5のメニュー2</li>
<li data-text="ツールチップ3">サンプル5のメニュー3</li>
<li data-text="ツールチップ4">サンプル5のメニュー4</li>
</ul>

JavaScript

<script>
  var obj = document.getElementById("sample5").getElementsByTagName("li");
  var length = obj.length;
  for(var i = 0; i < length;i++) {
   obj.item(i).onmouseover = function () {
 var element = document.createElement("div");
 element.innerHTML = this.getAttribute('data-text');
 element.className = "sample5-tooltips";
 this.appendChild(element);
   }
   obj.item(i).onmouseout = function () {
 this.removeChild(this.childNodes.item(this.childNodes.length - 1)); 
   }
  }
</script>


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

何か一言あれば!!

質問とかツッコミとかお気軽にコメントしてください。がんばって返します。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

3 件のコメント

  1. 勝手ながらツールチップの実装でこのサイトの項目1を参考につくらせてもらいました。
    しかしひとつ問題がありまして項目1を実装したところIE、Android端末は表示できましたが、ios端末だと表示できませんでした。
    なにか対策かiosでの表示方法がありましたらご教授ください。

  2. ピンバック: めもまとめ – The trash is doing best

  3. こちらのツールチップを参考にツールチップを作っております。
    こちらのサイトをiOSで拝見しているのですが、スマホでもツールチップがCSSで表示できてるのが分かります。
    同じように自分のサイトにこちらのサイトのCSSを記述すると、iOSでの表示ができず困っております。
    何か解決策はないでしょうか?
    参考にURLを載せておきますので、見ていただけると幸いです。