投稿者 tel | 2012年6月10日

CSSで文字幅にあったツールチップを表示する

ボタンなどの固定幅の要素の子要素としてツールチップを表示する場合にいろいろ試行錯誤したのでメモ。

HTML

<button type="button"><div><span>ツールチップ</span></div></button>

CSS

.button {
    position: relative;
    top: 160px;
    left: 50%;
    border: 1px solid #CCC;
    border-radius: 3px;
    box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 0 inset, rgba(0, 0, 0, 0.1) 0 1px 2px 0;
    background-image: -webkit-linear-gradient(top, #FFF, #FFF 25%, #F7F7F7);
    background-image: linear-gradient(#FFF, #FFF 25%, #F7F7F7);
    background-image: -moz-linear-gradient(top, #FFF, #FFF 25%, #F7F7F7);
    width: 48px;
    height: 48px;
    background-color: #FFF;
    display: block;
    vertical-align: middle;
    margin-top: 16px;
}

.button:hover {
    border: 1px solid #AAA;
}

.button:active {
    border: 1px solid #AAA;
    background-image: -webkit-linear-gradient(top, #E7E7E7, #DDD 25%, #F7F7F7);
    background-image: linear-gradient(#FFF, #FFF 25%, #F7F7F7);
    background-image: -moz-linear-gradient(top, #FFF, #FFF 25%, #F7F7F7);
    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 3px 0px inset;
}
.button div {
    width: 400px;
    text-align: center;
    position: relative;
    left: -184px;
    top: -48px;
}

.button span {
    display: none;
}

.button:hover span {
    display: inline;
    z-index: 100;
    font-size: 9pt;
    border: 1px solid #AAA;
    border-radius: 3px;
    background-color: #F7F7F7;
    padding: 2px 6px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

固定幅の要素の子要素はwidthを指定しない場合、親要素の幅になってしまう。
ポイントは間に不可視の大きめの要素を入れること。

サンプル
http://jsdo.it/sapphire_al2o3/czNs


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。