そこで、私が取り組んできた小さな見込み客獲得フォームにツールチップを追加しました。すべてがうまくいっています。ただし、Mozilla Firefox では、1 つの要素の配置が正しく機能していないようです。Chrome、Internet Explorer、および Safari でテストすると、すべて問題なく動作します。Firefox では、ツールチップは呼び出し元の画像のすぐ上ではなく、右上に配置されます。
これは次のようになります。
http://img84.imageshack.us/img84/3930/correctx.jpg
次のようにすべきではありません。
http://img198.imageshack.us/img198/5223/incorrectw.jpg
以下は、関連するコード、HTML です。
<div id="contact_container">
<h1><a data-tooltip="Click to hide/display the content below." href="#"><img class="information_icons" src="images/information_icon.png"></a>How can we contact you?</h1>
<input id="phone_number" name="phone_number" type="text" />
<input id="alternate_phone_number" name="alternate_phone_number" type="text" />
<input id="email_address" name="email_address" type="text" />
<div class="vertical_filler_small"></div>
<h2 id="contact_time_subtitle"><a data-tooltip="Click to hide/display the content below." href="#"><img class="information_icons_small" src="images/information_icon_small.png"></a>When should we call?</h2>
<fieldset id="contact_time">
<div class="contact_time_containers" id="contact_time_morning"><input id="contact_time_radio_morning" name="contact_time" type="radio" value="morning" /><span class="contact_time_options">Morning</span></div>
<div class="contact_time_containers" id="contact_time_afternoon"><input checked="checked" id="contact_time_radio_afternoon" name="contact_time" type="radio" value="afternoon" /><span class="contact_time_options">Afternoon</span></div>
<div class="contact_time_containers" id="contact_time_evening"><input id="contact_time_radio_evening" name="contact_time" type="radio" value="evening" /><span class="contact_time_options">Evening</span>
</fieldset>
</div>
そしてCSS：
body{background:#0d2635 url('../images/background.jpg') no-repeat center top;font-family:Arial,Helvetica,sans-serif;margin:0;text-align:center;}
h1{color:#fff;cursor:pointer;font-size:18px;font-weight:bold;margin:0;}
h2{color:#ff0;cursor:pointer;font-size:14px;font-weight:bold;margin:0;text-indent:3px;}
input[type="text"]{-khtml-border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;background-image:url('../images/background_text_inputs.jpg');border-color:#195d82 #11415c #6198b7 #1e74a6;border-radius:8px;border-width:1px;color:#aaa;float:left;font-size:12px;font-weight:bold;height:25px;line-height:100%;margin-top:8px;outline:none;padding:0;text-indent:5px;}
input[type="text"]:focus{color:#fff;border:1px solid #ff0;}
input[type="radio"]{cursor:pointer;}
img{border:none;}
img.information_icons{left:-2px;position:relative;top:4px;}
img.information_icons_small{left:-2px;position:relative;top:3px;}
div#contact_container{float:left;width:300px;}
input#phone_number{float:left;margin-right:10px;width:140px;}
input#alternate_phone_number{float:left;width:140px;}
input#email_address{float:left;margin-right:10px;width:280px;}
div.vertical_filler_small{float:left;height:10px;width:300px;}
fieldset#contact_time{border:none;display:block;float:left;}
div.contact_time_containers{cursor:pointer;float:left;margin-right:5px;}
span.contact_time_options{color:#ccc;font-size:14px;font-weight:bold;margin:0;}
a[data-tooltip]:link,a[data-tooltip]:visited{position:relative;text-decoration:none;}
a[data-tooltip]:before{content:"";visibility:hidden;}
a[data-tooltip]:after{-moz-border-radius:10px;-moz-box-shadow:0 8px 6px -6px black;-webkit-border-radius:10px;-webkit-box-shadow:0 8px 6px -6px black;background-color:#294466;border:1px solid #0f2e4d;border-radius:10px;box-shadow:0 8px 6px -6px black;color:#ff0;content:attr(data-tooltip);left:-16px;font-size:12px;padding:5px 15px;position:absolute;top:-20px;visibility:hidden;white-space:nowrap;}
a[data-tooltip]:hover:before,a[data-tooltip]:hover:after{-moz-transition:visibility 0s linear .1s;visibility:visible;}