Содержимое Popover, когда мышь над кнопкой в ​​рельсах

Question

У меня есть таблица соты, отформатированная в grid.i.e. 5 рядов по 10 клеток. Каждая ячейка представляет собой слот, который содержит некоторую информацию об элементе в слоте. Ячейка отформатирована на кнопку, когда я нажимаю на нее, она направляет меня на страницу, где пользователь может редактировать имя, тип и другую информацию, как обычную функцию редактирования рельсов.

Мой вопрос в том, что я, кроме указания пользователя на страницу редактирования, хочу, чтобы они увидели некоторые атрибуты об этом слоте. Поэтому, если они видят нужную им информацию, они могут щелкнуть по слоту и отредактировать на новой странице.

прямо сейчас, я попытался использовать CSS и javascript, чтобы скрыть и показать тег div, который хранит информацию, но когда я наводил указатель мыши на div, просто испортил расположение ячеек.

Я прочитал об использовании AJAX для визуализации страницы, но не могу понять, как сделать это с помощью popovers при наведении курсора мыши на кнопку.

Это моя таблица клеток в index.html.erb

<div class="scrollWindow"> 
    <% @slots.each_with_index do |item,index| %> 
    <div class="vmRow"> 
     <div class="btn-group"> 

     <% for i in item do %>  
     <% if !VendingMachine1.where(:slotID => i).first.nil? %> 
     <% vm = VendingMachine1.where(:slotID => i).first %> 
      <%= link_to vending_machine1_path(vm.id),:class=>"vmButton", :method => :get do %> 
      <div class="myPara"><%= i %> </div> 
      <div class="myPara">Q:<%= find_vm_quantity(vm) %> </div> 
      <div class="myPara">P:<%= vm.priority %></div> 
      <div class="myPara" ><%= vm.identifier %></div> 
      <% end %> 
     <% else %> 
      <div class="vmButton"> 
      <div class="myPara"><%= i %> </div> 
      <div class="myPara">Q:-</div> 
      <div class="myPara">P:-</div> 
      <div class="myPara">-</div> 
      </div> 
     <% end %> 
     <% end %> 

    </div> 
    </div> 
    <% end %> 
</div> 

моего контроллер

def index 
    @vending_machine1s = VendingMachine1.all.order(:slotID).paginate(:page => params[:page], :per_page => 10) 
    @total_quantity = VendingMachine1.sum(:quantity) 
    @slots =[["A1", "A2", "A3", "A4", "A5" ,"A6", "A7", "A8", "A9", "A0"], 
      ["B1", "B2", "B3", "B4", "B5", "B6", "B7", "B8", "B9", "B0"], 
      ["C1", "C2", "C3", "C4", "C5", "C6", "C7", "C8", "C9", "C0"], 
      ["D1", "D2", "D3", "D4", "D5", "D6", "D7", "D8", "D9", "D0"], 
      ["E1", "E2", "E3", "E4", "E5", "E6", "E7", "E8", "E9", "E0"]] 

    end 

Я прочитал о пироге из начальной загрузки, но я могу только набор данных-контент, как простые тексты, однако, мне нужно отобразить больше информации о модели, поэтому я думаю, что мне нужно пройти через контроллер?

Идеальное решение, когда я наводил указатель мыши на каждую ячейку, небольшое окно с popover отображает информацию о ячейке, когда я перемещаю мою мышь, она исчезает, а также для всех ячеек.

Пожалуйста, помогите. Это слишком сложно.

Answer 1

вам необходимо использовать position: absolute, чтобы избежать беспорядка html.

На JsFiddle я приведу пример. https://jsfiddle.net/bgzzzpe3/