javascript - 使一个 div 在焦点上 float 到另一个 div 的左侧

Question

我正在创建这个网站:http://appointmentbooker.net/我的多个设备、浏览器和分辨率的注册页面有问题。我试图让一个 div 在 onfocus 时出现在某些输入框旁边，并在 onblur 时让它消失。

例如，如果将鼠标放在密码框上，就会出现一个div。 http://appointmentbooker.net/register.php

我需要 div 在某些输入的左侧出现 5 个像素，对于每种分辨率和移动设备等。它会根据分辨率进入随机位置。 :(

到目前为止，我已经尝试过像素和百分比。

 <div class="jfk-bubble" id="jfk-bubble-pw2" style="visibility: hidden; left: 21%; top: 62%; opacity: 1; ">
    <p>Your password must contain a capital letter, a number, and must be atleast 8 characters long.</p>
    <div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowright" style="top: 8px; ">
    </div>
    </div>

和这段代码

 .jfk-bubble-arrow, .jfk-bubble-arrowimplafter {
 background-image:url('images/arrow.png');
 width:20px;
 left: 289px;
 height:20px;
 background-size:cover;
 }

还有这个

  .jfk-bubble {
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2);
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,.2);
 box-shadow: 0 1px 3px rgba(0,0,0,.2);
 background-color: #fff;
 border: 1px solid;
 position: absolute;
 z-index: 1201 !important;
 border-color: #bbb #bbb #a8a8a8;
 padding: 16px;
 width : 255px;
 line-height: 17px;
 }

我可以让它在一个浏览器上看起来很棒，但我想我需要强制它始终在某些输入的左侧显示 x 像素。我需要更改哪些 div 属性？

Answer 1

我建议使用工具提示插件，例如 jquery 工具提示或这个不错的插件 "tipsy"

这会为你节省很多时间..