Как сделать HTML/CSS form helpers/popover

Question

В настоящее время я пытаюсь выяснить, как делать popovers/form helpers. Если вы действительно не знаете, что я имею в виду, это то, что я имею в виду: http://www.ashrobbins.com/wp-content/uploads/2012/01/sliding-form-helpers.png

Я хотел бы сделать что-то вроде следующего:

# 1: Пользователь позиции красный квадрат , И желтые квадраты связаны, поэтому я большой желтый квадрат отображает информацию о первых квадратах. Вот что я имею в виду: http://postimage.org/image/wgzedx2fv/

PS: Обратите внимание: коробка в третьей колонке должна быть большой!

# 2 Для этого шага, когда пользователь переходит ко второй строке (красный квадрат), я хочу, чтобы поле в третьем столбце изменилось, чтобы соответствовать информации второй строки. Надеюсь, это поможет: http://postimage.org/image/69y7hyk63/

Не могу понять, как это сделать. В настоящее время я использую RoR и Bootstrap, но я не уверен, что ему что-то нужно делать, это может быть просто связано с CSS/HTML.

Я попытался сделать что-то подобное для своего html, и это сработало в некоторой степени, но оно не выглядит так хорошо, как хотелось бы.

Все, что угодно. Спасибо!

Update: В соответствии с просьбой, у меня есть некоторый код, как это:

<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. Я просто не могу правильно его подобрать здесь в SO ...

Answer 1

Для любого динамического события на стороне клиента (например, DOM Manipulation) вы захотите использовать 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/