Jimdoで使える、デザインを1ランクアップさせる簡単ツールチップ
2013.01.09更新
ツールチップは、あるテキストをマウスでなぞると小さな説明文が表示される窓のことです。
用語の説明をしたい時や、料金表の備考など、そのまま説明文を入れてしまうとごちゃごちゃしてしまう時に使えます。
今回はそれをJimdo上でやりたかったのでその方法です。難なく出来そうだったのですが、下記の問題で時間がかかりました。
- jimdoはjqueryとぶつかりやすい
- href=”#”だとリンク先に飛んで使いにくい（特にスマートフォンで）
そこで最終的に取った手段は下記の方法です。
- CSSを使う
- href=”javascript:void(0)”とする
jimdoはjqueryとぶつかりやすい
jimdoはjqueryとぶつかりやすいので純粋なjavascriptで実現させようと思いましたが、説明文をjavascript内ではなく、HTML上に直接書きたかったのでCSSを使うことにしました。 こうすることでテキスト編集も楽になります。
href=”#”だとリンク先に飛んで使いにくい（特にスマートフォンで）
マウスでなぞってもらうために、擬似リンクにし、「href=”#”」とさせていましたが、これだとページの上部に飛んでしまいます。 特にスマートフォンだと1度触った場合に説明文が表示されますが、2度触るとページ上部に飛んでしまいます。
操作ミスで今見ていた場所からページ上部に移動してしまい、大変使いづらくなります。 なので、リンク先に飛ばないように「href=”javascript:void(0)”」としました。
以下サンプルです。
HTML
<a class="info" href="javascript:void(0)">リンク<span>説明文が入ります。</span></a>
CSS
a.info{
position:relative;
z-index:1;
color:#5fa00e;
border-bottom:1px dotted #5fa00e;
}
a.info:hover{
z-index:2;
background:#A2B906;
color:#FFFFFF;
}
a.info span{
display: none;
}
a.info:hover span{
display:block;
position:absolute;
top:2em;
left:2em;
width:22em;
border:1px solid #ccc;
background-color:#FEFEFE;
color:#5FA00E;
text-align:left;
padding:5px;
}
ウェブ戦略にお悩みですか？
御社のWEB事業部となって、分析とデザインで集客から売り上げまで改善します！
デザインは2005年から。携わったHPは200件以上！
