バックパッカーズバイブル: ~世界を旅する前に読んでおきたい52の話~ (ジュタカ出版) Kindle版

【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です。







いつもシェアいただきありがとうございます!

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


ABOUT US
Jutaka運営者
タイ(バンコク・パタヤ)旅行&海外旅行&アジア生活が生きがい。18歳に初海外で濠洲→2007年ムエタイで初訪タイ→卒業旅行で3週間米国に初一人旅→ベンチャーに数年勤務→退職→世界一周1年32カ国→帰国→アジアに駐在員→現地会社経営※現在。アラサー。現在38カ国訪問。電子書籍随時。引退後はパタヤ移住が目標。