HTML/CSSフォームヘルパー/ポップオーバーの操作方法

Question

現在、私はpopovers/formヘルパーを行う方法を理解しようとしています。あなたは本当に私が何を言っているかわからない場合は、これは私が言及していますものです：

＃1：ユーザーの位置が赤い四角で http://www.ashrobbins.com/wp-content/uploads/2012/01/sliding-form-helpers.png

私は次のような何かをするようになります。そして、黄色い四角形は関連しているので、大きな黄色い四角形は最初の四角形についての情報を表示しています。私の意味は次のとおりです。 http://postimage.org/image/wgzedx2fv/

PS：3番目の列のボックスは大きくする必要があります。

＃2 この手順では、ユーザーが2番目の行（赤い四角）に移動すると、3番目の列のボックスを2番目の行の情報に対応するように変更します。うまくいけば、これは役に立ちます： http://postimage.org/image/69y7hyk63/

私はこれを行う方法を理解できません。私は現在RoRとBootstrapを使用していますが、何かする必要があるかどうかは分かりません。CSS/HTMLと関係があります。

私はこのようなことを自分のHTMLに施そうとしましたが、ある程度はうまくいきましたが、それは私が望むほど良く見えません。

何かが役に立ちます。 ありがとう！

更新： 要求されたとして、私はこのようないくつかのコードを持っている：

<div class="span4" style="margin-left: 0px; ">

<div class="span3" style="margin-left: 0px; ">here where the explanation will go</div>

それとも私のRoR：

• ビュー

= render :partial => 'shared/unitrow', :locals => {:f => f, :main_input => :offwarfare, :input_label => "Offensive", :power => OFFWARFARE_POWER}

• 部分

%div{:id => "wrapper"}

=f.input main_input, :label => input_label, :input_html => { :class => 'unitinputstyle'}, :wrapper_html => { :class => "unitinputdiv" }

%=div{:class => "unitpricediv"}

=power 

%div{:class => "clear"}

私はHAMLを参考にしています。私はちょうどここでそれを正しくスタイルすることはできません...

Answer 1

クライアント側（DOM操作のような）で何が起こっているのであれば、Javascriptを使いたいでしょう。私はあなたのためにjQueryを使用した例を書いています。好きなライブラリを自由に使うことができます（まったく使用しないでください）。

$("#interactiveForm input").focus(function() { 
    var target = $(this).attr("id"); // Gets the ID of the focused input 

    $("#infoBox p:visible").hide(); // Hides visible content (if any) 
    $("#infoBox").find("p#"+target).show(); // Shows the paragraph with the corresponding ID 
}); 

http://jsfiddle.net/LQNS8/