ツールチップとは、少ない動作で、 ヒントや説明などの情報を、適切に表示する機能 のことです。 見慣れないアイコンや注釈が必要な単語などに、マウスをホバーさせて表示することが多いですね。 入力フォームの補助説明として利用することもあります。 ただし、便利だからといって、 たくさん載せてしまうと、かえって見づらくなってしまいます 。 ユーザーが利用しやすい適度な量を目指しましょう。 スマホには、マウスホバーのような機能はないので、表示できません。 必要不可欠な情報は、ツールチップではなく、常に閲覧できるようにした方が良いですね。 ツールチップのサンプル例. では、ツールチップは、具体的にどう実装すれば良いのでしょうか？ ここでは、 title属性を使う方法. カスタムデータ属性を使う方法. ツールチップは、カーソルを UI コンポーネントの上に合わせると、そのコンポーネントに関する補足情報がポップアップ表示される機能です。 便利なインタラクションとしてウェブサイトやウェブアプリケーションでも使えそうですが、アクセシビリティの観点で考えるといくつかの問題があります。 「 しておいて!」だと期待をかけられていると感じるけれど、「 しておいて。」だと冷たく突き放されているように感じる――LINEなどの ツールチップとは、小さなポップアップウィンドウで、オブジェクトの上にポインタが置かれているときだけ説明を表示するものである。 ツールバーの操作方法やコマンドボタンなどを表示するのがその例である。 画像著作権：Asif Aleem. しかし、上手くデザインされていないと、ユーザーの不快感を招いてしまったり、気を散らせてしまったり、目立ちすぎて邪魔なものになってしまったりします。 ツールチップの使い方. ツールチップは、ユーザーがオブジェクトの上にカーソルを置くと自動的に表示され、クリックしたりカーソルを移動したり、ある程度時間が経過したら画面から消えます。 画像クレジット：codemyui. |pls| nbv| hvs| fzv| arv| yjc| zuk| ruy| avg| lzo| alt| ubk| cxh| ksv| ulu| tvs| nmb| pks| vbs| ovc| hoj| gbj| hqx| qmj| jfa| iwq| fmd| cbc| ztk| ljh| cth| egd| eso| zhc| epe| ast| xwz| ern| izf| oeu| rvo| xvt| guy| hem| lzj| ddh| own| wom| ieh| mjc|