ユーザビリティを向上するツールチップを作る【jQuery連載06】 | HTML5でサイトをつくろう

前回は、ベーシックなタブでのコンテンツの切り替えや出現方法などについてまとめましたが、今回は、リンク部分やフォームなどにマウスカーソルをあてると説明や入力サポートなどを表示させるツールチップを作成してみます。 リンク部分にマウスカーソルを当てた際にリンク先や内容説明のための説明のテキストを入れる場合にtitle属性を指定すると吹き出しのように入力した内容がでてくるが、小さかったり、一瞬で消えてしまうので、よりわかりやすく吹き出しのデザインをしてリンク先の内容の説明や入力フォームのサポートなどに使用するツールチップを作成してみました。 今回作成したサンプル 【サンプル1】title属性または、data-tips属性にtipsを設定する http://www.html5-memo.com/sample/jq-books/04/ 【サンプル2】title属性にtipsを設定する http://w