カテゴリー: jQuery

ブラウザ標準のツールチップだとブラウザによって改行対応していなかったりするので、
jQueryプラグインに解を求めた結果、これに行き着きました。

Simpletip jQuery Plugin

単純なツールチップはリファレンス見ながら楽勝で追加できるんですが、動的なテーブルに組み込んだため、ちょっと工夫が必要でした。
tdタグにホバーすると、内部のdivタグの中身をブラウザ標準のtitle属性ツールチップみたいに表示するようにしてます。

HTML

<td class="target_td">
  <p>テーブルの表示内容</p>
  <div class="tooltip_caption">
    ツールチップの<br>
    表示内容
  </div>
</td>

JS

$(document).ready(function () {
  //ツールチップのコンテンツ取得
  var tooltipContents = new Array();
  $("td.target_td .tooltip_caption").each(function(){
   //コンテンツ配列に追加
   tooltipContents.push($(this).html());
  });

  //ツールチップの適用
  $("td.target_td").each(function(i){
    $(this).simpletip({
      fixed: true
     ,content: tooltipContents[i]
    });
  });
});

CSS

 /* ツールチップ */
.tooltip_caption {
  display: none;
}
.tooltip{
  position: absolute;
  display: none;
  padding: 10px 13px;
  z-index: 3;
  color: #303030;
  background-color: #F5F5B5;
  border: 1px solid #DECA7E;
  line-height: 18px;
  text-align: center;
}

※業務で使ったコードの一部を抜粋、加工していますので、真似して動かなかったらごめんなさい！
プラグインをダウンロード、配置して、scriptタグで読み込むのもお忘れなく！

Tweet