Поповерный контент при наведении мыши на кнопку в рельсах

0

У меня есть таблица ячейки, отформатированная в grid.ie 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 из бутстрапа, но я могу установить только контент-контент, как простые тексты, однако мне нужно отобразить больше информации о модели, поэтому я думаю, что мне нужно пройти через контроллер?

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

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

Теги:
popover

1 ответ

0

вам нужно использовать position: absolute чтобы избежать messing html.

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

  • 0
    хм, я попробовал ваш метод, но div содержимого все еще появляется где-то еще.
  • 0
    мои правки jsfiddle.net/bgzzzpe3/2

Ещё вопросы

Сообщество Overcoder
Наверх
Меню