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

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

1) Щелкните ячейку, которая вызывает диалог jquery, который уже работает
2) Или наведите указатель мыши на ячейку, которая показывает обзор.

Image

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

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

<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>

Ответ 1

Попробуйте сделать что-то подобное. Чтобы всплывающая подсказка работала, вам потребуется 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, а затем плагин всплывающей подсказки.

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

Ответ 2

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

<link rel="stylesheet" type="text/css" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'; return false;" />

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