【hoverで使える】「Tooltip」ツールチップを使おう

【hoverで使える】「Tooltip」ツールチップを使おう

ホバー時にTooltipを使うとコメントのような吹き出しが出るのでユーザービリティが上がります。

使えるタイミング

例えばテキスト無しのアイコンリンクだけの場合、何を意味しているのか分からないケースがあります。
そんな時にこのTooltipを使えば、そのアイコンの意味している内容がわかるので便利です。

jQueryかbootstrapかCSSで使う

▼CSS
https://www.w3schools.com/css/css_tooltip.asp

▼jQuery plugin tooltip
https://jqueryui.com/tooltip/

▼bootstrap tooltip
https://www.w3schools.com/bootstrap/bootstrap_tooltip.asp

<a href=”#” data-toggle=”tooltip” title=”Hooray!”>Hover over me</a>

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tooltip&stacked=h

代替案は?

時間が無ければ普通にimgタグにtitle=”xxx”でもOKです。







この記事をSNSでシェアするには以下リンクから

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

ジュタカ

海外駐在員として、アジアで働いております。当ブログでは、「世界」をテーマに仕事や旅行情報を個人の体験談を交えながら発信しております。また、「タイ」と「ボクシング」が好きでこの分野の情報も多いです。

【趣味】ボクシング、旅行
【好きな国】タイ、香港・澳門

詳細プロフィールはこちらから