ツールチップ + ニュースティッカー
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。 その中でも特に勉強になったコードを紹介します。 コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。 あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！
ツールチップ
このページは、補足説明を小さな吹き出しで出す「ツールチップ」と、お知らせを自動で流す「ニュースティッカー」という、性格の異なる2つの小部品をまとめて扱っています。どちらも本文の流れを止めずに追加情報を届けるための道具です。
ツールチップは「読まなくても困らないが、あると助かる」注釈に、ティッカーは「新着を目立たせたいが場所は取れない」ヘッダー周りに――と、使いどころがはっきりしているのが特徴です。
おさえておきたいところ
「ツールチップ」を使う目的はこんな感じです。
目的：補足情報を表示させる
動きのきっかけ：マウスオーバー
ツールチップ
ニュースティッカー
おさえておきたいところ
「ニュースティッカー」を使う目的はこんな感じです。
目的：限られたスペースにお知らせを表示させる
動きのきっかけ：画面の読み込み後 / 画面のリサイズ
ニュースティッカー：上下に遷移するお知らせ(bxSlider.js)
実務メモ（2026年追記）
ツールチップは2026年現在、ブラウザ標準のPopover API（popover属性）とCSSの位置指定機能が実用段階に入り、自前で位置計算するコードは徐々に不要になっています。またtitle属性だけのツールチップはタッチ端末で表示されないため、hoverとfocusの両方で出す実装が基本です。ティッカーのような自動で動く情報は、止める手段の提供がアクセシビリティ上の要件（WCAG）になる点も押さえておきたいところです。
- ツールチップに「読まないと操作できない」情報を入れない（本文に書く）
- ティッカーには一時停止ボタンか、hoverで止まる挙動を必ず用意
- 流れるお知らせとは別に、一覧で読めるお知らせページへの導線を持つ
- このデモのbxSliderのようなjQuery系ライブラリは更新状況の確認を（保守の定点観測対象）
次回の予定
「カウンター」と「グラフ」を作ってみようと思います＼＼\٩( ‘ω’ )و //／／
