現在位置：E-riverstyle Design ホームの中のDevelopmentの中のJavaScriptライブラリ

Development

jQuery ToolTipsInOut

概要

これを導入すると、alt属性に指定されている代替テキストが下記図のように ToolTips として表示されるようになります。

代替テキストが、ToolTipsとして表示されると画像にリンクを指定している場合に、わかりやすくなるので、より誘導しやすくなるかもしれません。

設置方法

本プラグインは、jQuery 1.4.2で動作検証をしていますので、 jQuery 1.4.2が必要です。公式サイトから入手してください。入手したら、head要素の範囲以内にjQueryを設置してください。

jQueryのダウンロードはこちらから 

<script type="text/javascript" src="jquery.js"></script>

また以下のようなAPIの指定でもかまいません。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

必要ファイルをダウンロードして、CSSとJSファイルを同じくhead要素の範囲以内に設置してください。

<link href="tooltipsinout.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="tooltipsinout.js"></script>

ToolTipsを、適用させたいimg要素に下記のようにaltPopの値にした class属性を設置すれば完了です。

<img src="img.jpg" width="150" height="101" alt="富士山の写真" class="altPop" />

動作確認

  • Firefox 3.6.3
  • Google Chrome 4.1.249.1064 以上
  • Safari 4.0.4
  • Opera 10.50
  • Internet Explorer 6、 7、8

ただし、表示の一部にCSS3を用いていますので、 Internet Explorer 8 では、下記図のような形で表示されます。

Demo

富士山の写真

jQuery

var altText;

$(function(){
    $(".altPop").hover(toolTips, offToolTips);
});

function toolTips(event){
    var xOffset = 5;
    var yOffset = 10;
    altText = $(this).attr("alt");
    var toolTipTag = "<div class='tooltips'>" +altText+ "</div>";
    $("body").append(toolTipTag);
    $(".tooltips").css({
        "top" : (event.pageY - xOffset) + "px",
        "left" : (event.pageX + yOffset) + "px"
    }).fadeIn("normal");
}


function offToolTips(){
    var xOffset = 5;
    var yOffset = 10;
    $(".tooltips").remove();
    $(".altPop").mousemove(function(event){
    $(".tooltips").css({
        "top" : (event.pageY - xOffset) + "px",
        "left" : (event.pageX + yOffset) + "px"
        });
    });
}

CSS

.tooltips{
    width: 20%;
    background: #FFFFFF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 1px 1px 10px  #141114;
    -moz-box-shadow: 1px 1px 10px #141114;
    box-shadow: 1px 1px 10px #141114;
    padding: 10px;
    position: absolute;
    display:none;
    letter-spacing: 0.1em;
    border: 1px solid #141114;
}

Download

tooltipsinout_ver_1.3.zip