.tooltip()不是函数

Question

我正在尝试使用我在以下代码中找到的.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>

Answer 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，然后再加载工具提示插件。

希望这对你有帮助。

Answer 2

我通过添加boostrap libs & 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 3

在我的例子中，我上传了两个版本的jquery: jquery 3.4在工具提示代码之前，jquery 3.5在工具提示代码之后。我删除了jquery(3.5)的第二个上传，它起作用了