SPANタグに TITLE属性を付けておくとマウスオーバーで ToolTipが表示されます。
このとき、表示されるフォントのサイズが少し小さくなるので、これを元の文字と同じサイズで表示したいのですが、どのようなCSSを記述すればよいでしょうか?
1 件の回答
ブラウザの標準の機能を使ったツールチップは恐らく変更できません。
Javascriptを利用したツールチップを利用します。
英語サイトですが、簡単なものはjQueryというライブラリを使ったものがあります。
ご参考まで。
-
すばやいご回答、ありがとうございました。 やはりブラウザ標準のツールチップは変更できませんか。 jQueryや独自のライブラリでカスタマイズしたツールチップを実装できるのは分かっているのですが、Firefox用の拡張機能 "Gmail Subject Popupper" addons.mozilla.org/ja/firefox/addon/gmail-subject-popupper を作ったときに手っ取り早く Title属性を利用したので、このままでツールチップをカスタマイズできたらいいなと思っていたのですが、、、 Commented 2015年3月4日 5:00
-
1@backy0175 title属性は"Values of the title attribute may be rendered by user agents"と定義されて、その挙動はブラウザの実装に一任されています(大体はツールチップだろうとも書かれていますが)。なのでCSS側でどうこうできないのです。 CSSだけで何とかする方法はhoverトリックがありますが。width固定だったり。固定をやめたら文字が1単語ごとに改行されてしまったりと使いにくいのです)。 一応、(個人的には)ネタとして downloads.sixrevisions.com/css-tooltips/index.html 紹介しておきますね。 Commented 2015年3月4日 5:13
-
@backy0175 jQueryなら、 obj.attr("title") 等でタイトル属性も取得できますから、探せばあると思います。– MononCommented 2015年3月4日 5:35
-
2@NorikazIshii 情報ありがとうございます。とりあえず Firefoxの標準ツールチップをカスタマイズするCSSが userstyles.org にありました。 userstyles.org/styles/36/change-tooltip-colors-and-fonts このCSSでカスタマイズすると Firefox全体のツールチップがカスタマイズされてしまいますので、拡張機能の補足情報として紹介して、このあたりの運用はユーザーさんの判断に任せたいと思います。 (後で、標準ツールチップのフォントサイズだけ変更する userstyleを登録しておきます) Commented 2015年3月4日 5:55
-