レール上のボタン上にマウスを置いたときのポップオーバーコンテンツ

Question

私はgrid.i.eでフォーマットされたセルのテーブルを持っています。 10行5行。 各セルは、スロット内の項目に関する情報を含むスロットを表します。 セルはボタンに書式設定されています。クリックすると、通常のレール編集機能と同様に、アイテム名、タイプなどの情報を編集できるページに移動します。

私の質問は、編集ページにユーザーを誘導する以外に、そのスロットに関する属性の一部を表示したいと思うことです。そのため、必要な情報が表示された場合は、スロットをクリックして新しいページを編集できます。

今、私はCSSとjavascriptを使って情報を格納しているdivタグを表示してみましたが、divの上にマウスを置くだけでセルの配置が乱れてしまいます。

私はAJAXを使ってページをレンダリングする方法について読んだことがありますが、ボタンの上にマウスを置くとポップオーバーする方法を理解できません。

これは私がブートストラップからのポップオーバーについて読んだことがあるが、私は単純なようなデータ・コンテンツを設定することができ、私のコントローラ

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 

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> 

中の細胞の私のテーブルでありますテキストは、しかし、私はモデルの詳細情報を表示する必要があるので、私はコントローラを通過する必要があると思いますか？

理想的な解決策は、各セルの上にマウスを置くと、小さなポップオーバーウィンドウにセルの情報が表示されます。マウスを移動すると消滅し、同様にすべてのセルが表示されます。

助けてください。これは難しいことです。

Answer 1

あなたはposition: absoluteを使用する必要があります。

私はいくつかの例を提供しています。 https://jsfiddle.net/bgzzzpe3/