Popover Inhalt, wenn Maus über eine Schaltfläche in Schienen

Question

Ich habe eine Tabelle der Zelle in grid.i.e formatiert. 5 Reihen von 10 Zellen. Jede Zelle repräsentiert einen Slot, der einige Informationen über das Objekt im Slot enthält. Die Zelle wird auf eine Schaltfläche formatiert, wenn ich darauf klicke, er leitet mich auf eine Seite, wo Benutzer das Element Name, Typ, und andere Informationen, wie eine normale Schienen Editierfunktion bearbeiten können.

Meine Frage ist, dass ich anders als Benutzer auf die Bearbeitungsseite, ich möchte sie einige der Attribute über diesen Steckplatz zu sehen. Wenn sie also die benötigten Informationen sehen, können sie auf den Slot klicken und auf einer neuen Seite bearbeiten.

gerade habe ich versucht, CSS und Javascript zu verwenden, um ein div-Tag zu verstecken und zu zeigen, das die Informationen speichert, aber wenn ich Maus über dem div gerade die Anordnung der Zellen durcheinander bringe.

Ich habe über die Verwendung von AJAX lesen Sie die Seite zu machen, aber ich kann nicht verstehen, wie es, wenn die Maus über die Schaltfläche mit popovers zu machen.

Dies ist meine Tabelle von Zellen in 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> 

mein Controller

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 

Ich habe über popover von Bootstrap gelesen, aber ich kann nur Daten-Inhalte wie einfach eingestellt Texte, aber ich muss mehr Informationen des Modells anzeigen, also denke ich, dass ich durch den Controller gehen muss?

Die ideale Lösung ist, wenn ich Maus über jede Zelle, ein kleines Popover-Fenster zeigt die Informationen der Zelle, wenn ich meine Maus weg bewegt, verschwindet es, und ebenso für alle Zellen.

Bitte helfen. Das ist zu schwierig.

Answer 1

müssen Sie position: absolute verwenden, um HTML zu vermeiden.

Auf JsFiddle biete ich ein Beispiel. https://jsfiddle.net/bgzzzpe3/