onMouseでコメントを表示する

Question

#実現したいこと
tableのセルの右上に三角の画像を置き、そこにonMouseでToolTipsを表示する
三角の画像のイメージは、Excelでセルに対し、コメントを追加すると右上に
三角の印が付くが、それと同じ

#調べたこと
http://www.css-lecture.com/log/javascript/017.html
http://js.crap.jp/book/chapter2/icon-effect.html
なんとかcssとjqueryでToolTipsは可能のようだが、onMouseするための三角の印
をどのようにHTMLのtable内に配置したらいいのかが不明である

#回答を受けてやってみたこと＋問題点
■問題点
セル内で、赤色の三角よりやや左でonMouseしたとき
ポップアップした部分が点滅して表示されます。
どこを改修したらよいでしょうか？

<th style="margin-top:0px;padding-top:0px;padding-right:0px;" >
<div class="content">
<div class="tri_icon">
</div>
<div class="comment">コメントです	</div>
</div>
セル内の文字列
</th>

.comment{
	width: 100px;
	/* height: 80px; */
	/* background: yellow; */
	position: relative;
	z-index: 1;
}
.tri_icon{
	position: inherit;
	z-index: 2;
	top: 0;
	left: calc(100% - 20px);
	/* border-top: 10px solid red; */
	border-bottom: 10px solid transparent;
	border-left: 10px solid transparent;
	border-right: 10px solid red;
}
.comment {
      display: none;
      width: 200px;
      position: absolute;
      top: 120px;
      left: 250px;
      padding: 16px;
      border-radius: 5px;
      background: #33cc99;
      color: #fff;
      font-weight: bold;
    }
 .tri_icon:hover + .comment {
 		display: block;
	}

Comments

[x_x]

どのようなことを試しましたか？

Answer 1

CSSを使います。要点は次の2点です。
0. 三角形のアイコンを作る。
0. position要素とz-index要素を使い、子要素を重ねて配置する。

更に三角形を動かしたい位置に動かします。今回はExcel風なので右上隅となります。

<div class="content">
     <div class="comment">
　　　　　　<!-- ここにコメントが入る -->
     </div>
     <div class="tri_icon">
          <!-- ここにCSSで作成した三角形が入る -->
     </div>
</div>

.comment{
    width: 100px;
    height: 80px;
    background: yellow;
    position: relative;
    z-index: 1;
}
.tri_icon{
　　　position: absolute;
　　　z-index: 2;
     top: 0;
     left: calc(100% - 20px);
     border-top: 10px solid red;
     border-bottom: 10px solid transparent;
     border-left: 10px solid transparent;
     border-right: 10px solid red;
}            

あとは、jQueryなりJavaScriptなりをつかって、コメントの有無で要素を見せ隠しすればいいだけです。

Comments

[sakura-shi]

ありがとうございます。
実際にやってみたのですが、質問文にあるとおり、マウスポインタの場所によっては、ポップアップが点滅するという問題がでました。
どこを改修したらよいでしょうか？

[FKM]

Chrome、Firefox、IEで検証しましたが、別にポップアップ点滅はないですよ？使用マウスポインタの認識に問題がないか確認してみてください。

Answer 2

CSSで行う例。data-comment属性をつけているものとします。

th[data-comment] {
    position: relative;
}

th[data-comment]:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-top: 6px solid red;
    border-left: 6px solid transparent;
}

th[data-comment]:hover:after {
    content: attr(data-comment);
    position: absolute;
    top: -0.5em;
    right: -4em;
    border: 1px solid #000;
    font-weight: normal;
    background: #ffffe1;
    color: #000;
}