.tooltip () не является функцией

Question

Я пытаюсь использовать .tooltip (), который я нашел из следующего: Jquery-ui tooltip . То, что я имею, является приложением рельсов, у которого есть некоторая информация в таблице. В отдельных клетках. В настоящее время вы можете просмотреть полную информацию о ячейке, щелкнув по ней, чтобы открыть диалоговое окно jquery, которое работает нормально. Я пытаюсь добавить к этому два варианта.

• 1) Щелкните по ячейке, которая вызывает диалог jquery - который уже работает

• 2) Или наведите курсор на ячейку, которая показывает обзор.

Изображение

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

Каков наилучший способ сделать это? У меня есть следующий код, который работает с и вызывает диалог. Я попытался добавить:

<td class="<%= booking.status %>" onmouseover='$("#booking<%= booking.id %>").tooltip()'>

до того, что не сработало, и я, наверное, понимаю, что это не сработает, потому что между ними будет конфликт. В дополнение к этому я попытался использовать simpletip и qtip, но, похоже, не повезло. То, что я пытаюсь сделать, неосуществимо.

<td class="<%= booking.status %>" onclick='$("#booking<%= booking.id %>").dialog()'>
  <center>
  <%= booking.reference_number %>
  <% if current_user.is_booking_manager? %>
    (<%= booking.company_name %>)
  <% end %>
</center>
<div style="display:none;">
  <% if not booking.provisional? or current_user.is_booking_manager? %>
    <div id="booking<%= booking.id %>" title="Booking Information">
  <% else %>
    <div id="booking<%= booking.id %>" title="Edit Booking">
  <% end %>
      <%= render :partial => "booking_dialog", :locals => { :booking => booking } %>
    </div>
  </div>
</td>

Answer 1

Я избавился от ошибки, добавив библиотеку boostrap & css

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />

<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Answer 2

Попробуйте сделать что-то вроде этого.Для работы всплывающей подсказки вам потребуется title установить для элемента управления.

HTML

<td id="bookingTd" title="This is a tooltip." 
     class="<%= booking.status %>" 
     onclick='$("#booking<%= booking.id %>").dialog()'>

</td>

JavaScript

$(document).ready(function(){
   $("#bookingTd").tooltip();
});

Также убедитесь, что вы сначала загрузили jQuery, а затем плагин всплывающей подсказки.

Надеюсь, это вам поможет.