プログラミング奮闘記録

プラグラマーへ奮闘。PHP・Cakephp・JavaScript・isoアプリのコード勉強ブログです。その他の言語やツールなども使用します。

ツールチップ

メモです。

参考URL:

wataame.sumomo.ne.jp

 

JS

<!--チップツール-->
<link rel="stylesheet" type="text/css" href="css/jquery.tgClickToolTip.css">
<script src="js/jquery.tgClickToolTip.js" type="text/javascript"></script>
<script src="js/jquery1.8.1.min.js" type="text/javascript"></script>

 

 

<!--チップツール-->
<script type="text/javascript">
$(function(){
$('a.clickToolTip').click(function(){
// リンクの # idを取得
var targetNote = $(this).attr('href');

// [?]の座標を取得
var position = $(this).position();
var newPositionTop = position.top -115; /* + 数値で下方向へ移動 */
var newPositionLeft = position.left + 164; /* + 数値で右方向へ移動 */

// ツールチップの位置を調整
$('p'+targetNote).css({'top': newPositionTop + 'px', 'left': newPositionLeft + 'px'});

// ツールチップの class="invisible" を削除
$('p'+targetNote).removeClass('invisible');
});

// 表示されたツールチップを隠す処理(マウスクリックで全て隠す)
$('html').mousedown(function(){
$('p.toolTip').addClass('invisible');
});
});

</script>

 

 

 

HTML

<div class="new-favorite-btn">
<a href="#favorite_btn-4" class="clickToolTip"><img src="images/top/shisetsu_star.png"></a>

<!-- ツールチップで表示させる内容 -->
<p id="favorite_btn-4" class="toolTip invisible"><img src="images/top/shisetsu_favorite_btn_sentaku.png"></p>

 

 

CSS

.invisible{
display: none;
}

a.clickToolTip{
margin: 0;
padding: 2px 6px;
}

p.toolTip{
margin: 0;
padding: 10px;
width: 200px;
min-height: 30px;
position: absolute;
top: 100px;
left: 20px;
}