前の関連記事：Blogger:カレンダー(2)Calendar_Bloggerモジュールの作成その1
CSSツールチップを利用してツールチップにリンクを表示させる
CSS Tooltip
このページの解説がとてもわかりやすかったです。
ツールチップの内容をvisibilityをhiddenにした子ノードに入れておき、マウスポインタが上に親ノードに来たら、子ノードのvisibilityをvisibleにして表示させる方法です。
visibilityがvisibleになった子ノードはすでに描画された要素の間に入り込むのではなく、それらの上層に描画されます。
上記の例では疑似クラス (Pseudo-classes)を使ってマウスポインタの状態を把握しています。
JavaScriptとCSSの二元管理は直感的に理解できないのですべてJavaScriptで一元管理することにしました。
JavaScriptで擬似クラスを実現するには動的にスタイルシートを生成して要素に追加すればよいようです。(html - Change :hover CSS properties with JavaScript - Stack Overflow)
しかしこの方法は採用しませんでした。
JavaScriptだけでツールチップを表示させる
擬似クラスの代わりに Blogger:ページ番号付ページナビ(9)Paginavi2_Bloggerモジュールの導入と同様に要素のプロパティにイベントハンドラを導入しました。
Calendar_Blogger/Calendar_Blogger.js at 087947ae5b00adc18426f36c0cb41925f8a9498d · p--q/Calendar_Blogger
これでtitle属性の時と同様に日の上にマウスポインタをもっていくとツールチップが表示され、そしてそのツールチップ内に各投稿へのリンクを表示することできました。
マウスクリックするとツールチップが消えなくなる問題点についてはあとで述べます。
ところがうまくリンクを表示できたものの、それをクリックしようとマウスポインタをツールチップ上に持って行こうとすると、ツールチップが消えてしまってリンクがクリックできません。
これはマウスポインタが日のdiv(flexアイテム)からでるときのイベントにツールチップ表示を消す関数を割り当てているのが原因です。
ツールチップ上にマウスポインタがある間はツールチップ表示を消さないように工夫しないといけません。
そういう例がないか探してみましたが見つからず結局自分で考えることにしました。
ツールチップが消えないようにする
ツールチップ上の<a>タグをクリックできるようにするにはflexアイテム上をマウスが外れてもツールチップが消えないようすればよいわけです。
ということで最初に思いついたのは、マウスをクリックしたときはフラグを倒して、マウスがflexアイテムから外れてもツールチップ表示を消さないようにして、その後はマウスをクリックするたびにそれを切り替える方法でした。
それをやっているのが上記の例です。
マウスをクリックしてマウスポインタをカレンダー上に移動させるとツールチップが次々と出現して消えないことがわかります。
ツールチップを消すためにはマウスをクリックした同一のflexアイテム上で再度クリックしないといけないためです。
そんな面倒なことはやってられないので、この方法は失敗です。
CSSツールチップはtitle属性のツールチップと違ってiOS Safariでもタップで表示できました。
参考にしたサイト
CSS Tooltip
CSSによるツールチップ表示方法。
html - Change :hover CSS properties with JavaScript - Stack Overflow
擬似クラスをJavaScriptで実現する方法。
0 件のコメント:
コメントを投稿