Jimdoで使える、デザインを1ランクアップさせる簡単ツールチップJimdoで使える、デザインを1ランクアップさせる簡単ツールチップJimdo2013.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)”」としました。href="javascript:void(0)">リンク<span>説明文が入ります。#ccc;background-color:#FEFEFE;color:#5FA00E;text-align:left;padding:5px;}ウェブ戦略にお悩みですか?御社のWEB事業部となって、分析とデザインで集客から売り上げまで改善します!デザインは2005年から。