株式会社アイネックスはソフトウェアの開発、データ復旧サービス、ホームページの作成ツール企業です。

横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
    データ復旧サービス、ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

galleria

03-14)  1. マウスオーバーで吹き出しのチップを表示

 

マウスオーバーでマウスオーバーで吹き出しのチップを表示

アンカー要素に対してツールチップを作成する。

cssの書き方 /*-------------------------------------------------------
03-14 マウスオーバーで吹き出しのチップを表示
-------------------------------------------------------- */
.note_481{
 width:600px;
 margin: 0 0 20px 0;
 font-size: small;
 color: #2F2120;
 /*line-height: 30px;
 background-image: url(../images/park_note_line.gif);
 background-repeat: repeat;
 background-position: left bottom;*/
}

.note_481 span{
 line-height: 2em;
 /*padding-bottom: 0.4em;*/
 border-bottom: 1px dotted #2F2120;
}

.note_481 a.tooltip{
 position: relative; /* 基準点を設定  */
}
.note_481 a.tooltip span{
 display: none;
}
.note_481 a.tooltip:hover span{
 display: block;
 position: absolute; /* 基準点をベースとする  */
 padding: 10px 10px 5px 10px;
 width: 130px;
 top: 1.5em;
 left: 0;
 line-height: 1.2;
 color: #FFFFFF;
 font-size: small;
 background-image: url("../images/park_note_tooltip.png");
 background-repeat: no-repeat;
 background-position: left top;
}
HTMLの使用例  <p class="note_481">
<span>横浜公園は、文字列 ・・・
<a href="#" class="tooltip">バーベキュー広場
<span>(ご利用にはWebサイトからの事前予約が必要)</span></a>
文字列 ・・・</span>
</p>

横浜公園は、神奈川区星空タウンにある公園です。再開発が進む星空タウンの中心に位置し、 星空タウンの憩いの場として機能しています。
横浜公園は、関東でも有数の広大な芝生広場や、お子様が安心して遊べるじゃぶじゃぶ池、さらにはドッグランも併設しております。
また、最大200名収容可能な バーベキュー広場 (ご利用にはWebサイトからの事前予約が必要になります。一部食材の販売もいたしております。) も完備。バーベキューに必要な機材のレンタルや、一部食材の販売もいたしております。
本年度から、公園の指定管理者に民間企業である株式会社INEXが就任。ますます、魅力的な横浜公園に成長していきます。


03-14)  2. マウスオーバーで吹き出しのチップを表示(サンプル)

cssでツールチップ・その2

ツールチップのデモその2です。ベーシック ベーシックなツールチップです。シンプルに使えていいですね!,、 ×印 Error×印の画像つき。目立っていいですねヘルプ Helpヘルプもこんな感じで出してあげたり。,、 インフォーメーション Informationインフォーメーションとかもこうしてマウスオーバーで。注意! Warning注意書き。これはアカン!みたいなのを教えてあげようのデモをご覧いただけます