Javascript 鼠标悬停在rails中的按钮上时弹出内容

我有一个网格格式的单元格表。5行10个单元格。 每个单元格表示一个插槽，其中包含有关插槽中项目的一些信息。 单元格被格式化为一个按钮，当我点击它时，它会引导我进入一个页面，用户可以在其中编辑项目名称、类型和其他信息，就像普通的rails编辑功能一样

我的问题是，除了将用户引导到编辑页面，我还希望他们看到关于该插槽的一些属性。这样，如果他们看到所需的信息，就可以单击插槽并在新页面上进行编辑

现在，我尝试使用CSS和javascript隐藏和显示存储信息的div标记，但当我将鼠标移到div上时，单元格的排列就会混乱

我读过关于使用AJAX渲染页面的文章，但我不明白当鼠标悬停在按钮上时如何使用弹出窗口

这是我在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>

我从bootstrap上读到了popover，但是我只能像简单的文本一样设置数据内容，但是，我需要显示更多的模型信息，所以我想我必须通过控制器

理想的解决方案是，当我将鼠标移到每个单元格上时，一个小的弹出窗口将显示该单元格的信息，当我移开鼠标时，它将消失，同样，所有单元格也会消失

---

请帮忙。这太有挑战性了

您需要使用

position:absolute

来避免弄乱html

在JSFIDLE上，我提供了一些示例。

---

hmm，我尝试了你的方法，但是content 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