横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
マウスオーバーでマウスオーバーで吹き出しのチップを表示
アンカー要素に対してツールチップを作成する。
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が就任。ますます、魅力的な横浜公園に成長していきます。
ツールチップのデモその2です。ベーシック ベーシックなツールチップです。シンプルに使えていいですね!,、 ×印 ×印の画像つき。目立っていいですね、 ヘルプ ヘルプもこんな感じで出してあげたり。,、 インフォーメーション インフォーメーションとかもこうしてマウスオーバーで。、 注意! 注意書き。これはアカン!みたいなのを教えてあげようのデモをご覧いただけます