ツールチップを使ってみよう！

はじめに

このブログでもたまに使っていますが、ブログでちょっとリンク先の説明したい時や目立たせたい時、一言いいたい時などにいかがでしょうか？( ´▽｀)ノ

ちょっとオシャレ？で良いのではないでしょうか。

今回は比較的に簡単なツールチップの設定方法を紹介します。

簡単なので挑戦してみましょう。

イメージ

赤枠で囲んである部分です。
マウスのカーソルを乗せるとテキストが出てきます。

★ここにカーソルを乗せてみて→

ツールチップ設定方法

手順は簡単２ステップ

①CSSにコード追加

②ツールチップを付けたいリンクにHTMLを追加

以上です。

①CSS
※「/*説明*/」を入れときましたので自由に変更して下さい。
※/**/の中の文字は表示されませんので、そのままコピペしても大丈夫です。

/* ▼▼ツールチップここから▼▼ */




.toolTip{


    position: relative;


}




.toolTip span{


  display: block;


  border: solid 2px #999;   /*枠線の種類・太さpx・カラー*/


  background-color: #eee;   /*背景のカラー*/


  color: #666;　　　　　    /*テキストカラー*/　


  text-decoration: none;    /*装飾下線なし*/


  position: absolute;       /*絶対位置配置*/


  top: 20px;                /*高さ*/


  left: 10px;               /*位置*/


  padding: 5px;             /*余白*/


  visibility: hidden;       /*box表示設定*/


  width: 150px;             /*幅*/


}




a.toolTip:hover,a.toolTip:hover span{


  visibility: visible;


  z-index: 100;


}




/* ▲▲ツールチップここまで▲▲ */

②HTMLの追加
ここでは例をあげて説明します。

A=通常のリンク
B=ツールチップを追加したリンク←ツールチップを使う場合
C=追加したコード

※赤字が追加したコードです。
※FONT-WEIGHT: bold は文字を太字にしています。（標準が良いかたはnormal　にして下さい）

A.<a href="◆リンク先URL◆">◆リンク文字◆</a>




B.<a style="FONT-WEIGHT: bold" class="toolTip" href="◆リンク先URL◆">◆リンク文字◆<span>ここに表示したいテキスト</span></a>




C.style="FONT-WEIGHT: bold" class="toolTip"と<span>ここに表示したいテキスト</span>

知恵の樹・アメブロテンプレート

アメブロテンプレート・カスタマイズ

ツールチップを使ってみよう！

はじめに

イメージ

ツールチップ設定方法