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

Posted 2023-02-23

【中文标题】鼠标悬停在rails中的按钮上时弹出内容

【英文标题】：Popover content when mouse over a button in rails

【发布时间】：2017-06-11 13:43:37

【问题描述】：

我有一个网格格式的单元格表。即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>

我的控制器

  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

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

理想的解决方案是当我将鼠标悬停在每个单元格上时，一个小的弹出窗口将显示单元格的信息，当我将鼠标移开时，它会消失，对于所有单元格也是如此。

请帮忙。这太具有挑战性了。

【参考方案1】：

您需要使用position: absolute 以避免弄乱html。

在 JsFiddle 上，我提供了一些示例。 https://jsfiddle.net/bgzzzpe3/

【讨论】：

嗯，我试过你的方法，但内容div仍然出现在其他地方。