前の関連記事：Blogger:カレンダー(4)Calendar_Bloggerモジュールの作成その3
onmouseoutの出先での場合分けの方法は思いつかず
ツールチップを出たときのイベントはspan要素からのonmouseoutを捕まえることにしました。
targetのtagNameがSPANのときにツールチップ表示を消すようにしたのですが、この方法だとツールチップ内の投稿へのリンクに入るときにもSPANのonmouseoutが起動するためにうまくいきません。
ツールチップの外に移動したときはを起動するけど、ツールチップ内のaタグへ移動したときは起動しない方法に考えないといけません。
移動先の要素によって場合分けができればよいですが、そういう方法はわかりませんでした、、、
イベントリスナを使えばバブリングフェーズでaタグの要素を発火させたときに次にspanタグの要素を発火させることができると思ったのですが、そうではないようでした。
ツールチップのspanタグがその子ノードのaタグのノードに入るときは発火しないで、それ以外のところに出るときだけ発火する方法を思いつけばよいのですが、どう頑張っても思いつきませんでした。
タイマーをセットして時間でツールチップ表示を消す
Using any HTML inside the tooltip
なにかいい方法がないかと探しているとこのページを見つけました。
ツールチップ内にリンクがありツールチップからマウスポインタをはずすとツールチップがちょっと遅れて消えます。
jQuery TOOLS - The missing UI library for the Web
このjQuery TOOLSのtooltip機能で実現していました。
jquerytools/tooltip.js at master · jquerytools/jquerytools
ソースのtooltip.jsを読むとどうやらタイマーを使っているようです。
そのためにツールチップ表示にタイムラグが生じているようです。
マウスポインタがツールチップから外れるときはすぐに表示を消さずにwindow.setTimeoutで消すのを少し遅らせます。
spanタグの要素からaタグの要素に入ったときはwindow.clearTimeoutでタイマーをクリアします。
これでspanタグの要素から出た先によってツールチップの表示を制御できます。
ツールチップをタイマーで消すことで解決
Calendar_Blogger/Calendar_Blogger.js at 132b3f12b5f9da90d4c2cb437a8b14f3eefcb885 · p--q/Calendar_Blogger
これでリンクをもったツールチップの制御がうまくできました、、、
うーんこれだとマウスポインタがツールチップに入らない時はツールチップが消えませんね。
これはBlogger:カレンダー(4)Calendar_Bloggerモジュールの作成その3のflexコンテナにpaddingを設定してそこでツールチップが消えるようにすれば解決しますね。
Calendar_Blogger/Calendar_Blogger.js at 2df2af48811426dd3ecbefb9c7580cd6d7dc98f2 · p--q/Calendar_Blogger
flexコンテナの2pxのpaddingにmouseoverしたときにツールチップが消えるようにしました。
あと考えないといけないのはiOS Safariでもツールチップが消えるようにする方法です。
参考にしたサイト
Using any HTML inside the tooltip
jQuery TOOLSによるツールチップ表示の例。
jQuery TOOLS - The missing UI library for the Web
jQuery TOOLS。
jQuery TOOLSのtooltip.jsのソース。
関数を遅延実行します。
関数の遅延実行をキャンセルします。
0 件のコメント:
コメントを投稿