ホームページビルダー・グレート初心者講座

　Easy Tooltipでツールチップを表示

Easy Tooltip

Easy TooltipはjQueryのプラグインで、リンク上にマウスが来た際にツールチップを表示します。

サンプル

下のリンク上にマウスをのせるとツールチップを表示します。
>>ツールチップのテスト

Easy Tooltipのダウンロード

以下のページからダウンロードします。

Easy Tooltip - jQuery plugin
https://cssglobe.com/post/4380/easy-tooltip--jquery-plugin

ダウンロードしたファイルを解凍すると、easyTooltip.js と jquery.js がありますので、
これをhtmlファイルと同じディレクトリにコピーしておきます。

備考

jquery.js が既にある場合は既存のものを使用しても構いません。
バージョンによっては問題が生じる可能性がありますので、その場合は
同梱されている jquery.js を使用してみて下さい。

easytooltip1.cssのダウンロード

下のURLを右クリックして保存しhtmlファイルと同じディレクトリにコピーします。

easytooltip1.css
https://aimix.jp/easytooltip1.css

ヘッダ内にタグを追加

ビルダーの「編集」 → 「ページの属性」とクリックし「その他」のタブをクリックします。

「その他のHTMLタグ」と記載された入力枠がありますので、そこへ以下のソースを追加します。
追加したら「OK」ボタンをクリックして下さい。

備考

既に jquery.jsの行が存在する場合は、この1行を除いたソースを貼り付けます。
この場合 ddsmoothmenu.js の行よりjquery.js の行が上に来るようにして下さい。

直接HTMLソースに追記する場合は <head> ～ </head> の間に追加します。

リンクタグにtitleを追加

1. HTMLソースで直接編集する場合

ツールチップを表示したいリンクを左クリックし「HTMLソース」に切り替えます。
title="ツールチップに表示させる文字列" をリンクタグに追加します。

修正前
<A href="https://aimix.jp/">リンク</A>

修正後
<A href="https://aimix.jp/" title="トップページへ">リンク</A>

上の例では、リンク上にマウスをのせると トップページへ と表示されます。

2. ビルダーの「タグ一覧」から編集する場合

タグ一覧ビューを表示します。
画面右端に

というアイコンがありますので、これをクリックします。
上記アイコンが無い場合は「表示」 → 「タグ一覧ビュー」をクリックしてアイコンを表示させてから
操作を行って下さい。

タグ一覧ビューを表示したままツールチップを設定したいリンク（画像やテキスト）を
左クリックするとタグ一覧ビューに以下のように表示されます。

下の例ではリンクを設定した文字列をクリックしたところです。
青くハイライト表示された

アイコンの上に A がありますので、これをクリックします。

この中に title という項目がありますので右側の（未設定）の部分をダブルクリックし、
ツールチップに表示させたい内容を入力して下さい。
同じ操作を行えば内容の修正が行えます。

動作確認

以上の操作で設定リンク上にマウスをのせるとツールチップが表示されるようになりました。
「プレビュー」画面にして動作を確認してみましょう。

リンクは指定しないがツールチップだけ表示したい場合

特にリンク先は無いもののツールチップだけ表示させたい場合は、
リンク先を # としてリンク設定を行い、それに対して上記操作を行います。

色の変更

easytooltip1.css をテキストエディタで開いて以下のように修正します。
色番号はビルダーのカラーパレットや、検索エンジンでカラーチャートなどのキーワードで
検索して好みの色を探してください。

#easyTooltip{
padding:5px;
border:1px solid #cccccc;
color:#000000;
background:#ffffff;
}

ツールチップの背景を画像に変更

easytooltip1.css をテキストエディタで開いて以下のように修正します。

初期状態で背景は色で指定していますが、これを url(画像のパス) とする事で
ツールチップの背景画像を指定する事ができます。

下の例では、 tooltipbg.gif を背景として適用します。
例では背景用画像をHTMLファイルと同じディレクトリに置いています。

修正前
#easyTooltip{
padding:5px;
border:1px solid #cccccc;
color:#000000;
background:#ffffff;
}

修正後
#easyTooltip{
padding:5px;
border:1px solid #cccccc;
color:#000000;
background:url(tooltipbg.gif);
}

サンプルで使用した背景画像です。
ご自由にご利用下さい。

備考

HTMLファイルと同ディレクトリに背景用画像がある場合は上記のようにファイル名だけ指定します。
HTMLファイルのディレクトリに image というディレクトリを作成して、その中に画像を格納している
場合は images/tooltipbg.gif などと指定します。