雑多なレビューサイトこもれびゅー備忘録を兼ね PC周辺機器・家電製品・文房具等々の製品レビューを行っているサイトです

• ホーム
• プログラミング
• HTML・CSS

独自データ属性を利用しツールチップ表示する平成30年 5月 5日 作成

概略

今まではツールチップを表示する際には「aタグ」内に「spanタグ」を入れ子にし、通常は「display: none;」にし、hover時「display: block;」にして対応してきたが、独自データ属性にても同じ様な効果がえられるとの事。

「独自（カスタム）データ属性」と呼ばれる新しい仕様がHTML5から追加、勉強も兼ね調べ導入してみた。

手段

HTML要素に接頭語「data-」で始まり属性値を付与しCSSにてコントロールするだけ。

接頭辞data-以外で名前に使えるのは、文字、数字、ハイフン（-）、ドット（.）、アンダースコア（_）だけ、大文字は使えない。

実装方法

記載例

<a href="https://www.google.co.jp/" data-任意の名前="ツールチップ">Google</a>

実際にマウスホバー時にツールチップを表示されてみる。

HTML

<a href="https://www.google.co.jp/" data-tooltip="グーグルサイトへのリンク">Google</a>

CSS

a {
	display: block;
	position: relative;
}

a:hover::before {
	content: attr(data-tooltip);
	margin: 0 auto;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
}

応用編

attrで独自データ要素をツールチップ表示していましたが、title属性やhref属性に対しても同じように作用してくれる。

contentプロパディの値を変更するのみで可能。

HTML

<a href="https://www.google.co.jp/" data-tooltip="グーグルサイトへのリンク" title="タイトル">Google</a>

CSS

a:hover::before {
	// 独自データ属性
	content: attr(data-tooltip);
	
	// title属性
	content: attr(title);
	
	// href属性
	content: attr(href);
}

デモ

デモページへ

考察

title属性はデフォルトでツールチップが出てき、かえって見栄えが悪くなってしまう。

上記事例プラス トランジション（toransirion）でゆっくり表示させたりすれば見栄えも良くなりツールチップを効果的表示できそうです。

HTMLコードもすっきりとして良い感じ。

コメント