Jquery .tooltip（）不是函数

我正在尝试使用从以下位置找到的.tooltip（）。我有一个rails应用程序，它在表中包含一些信息。在不同的单元中。当前，您可以通过单击单元格查看单元格的完整信息，从而打开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>

()
“预订对话”，：locals=>{：预订=>booking}%>

试试这样做。要使工具提示起作用，您需要为控件设置

标题

HTML

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

</td>

还要确保先加载jQuery，然后加载工具提示插件

---

希望这对您有所帮助。

我通过添加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>

---

如果您使用的是Bootstrap 4，请使用

.min.js

jquery文件代替

.slim.min.js

文件：

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

---

别忘了，

工具提示（）

并不总是存在于jQuery UI中。具体地说

新增版本：1.9（来源：）

---

如果您没有版本为1.9或更高版本的jQuery UI，则会出现错误：

tooltip（）不是函数（）

我确实尝试了您建议的方法，这使我的代码看起来如下所示：但运气不佳。奇怪的是，我的assets/javascript文件夹中也有jquery.tooltip.js，以便检查演示页面中包含的其他js。检查JSFIDLE。在这里，我添加了所有资源，它正在工作：）出于某种原因，我加入了示例，但它对我不起作用。我在jquery.ui.tooltip中遇到以下错误：

$。小部件不是函数\u destroy:function（）{

我只是以你的为例。我还包括了所有的js和css，我已经使用了jQuery插件。这同样有效。试试这个。希望这对你有用。它只需要基本的jQuery.js。尝试将

$（“#一些”）.tooltip（）；

移动到

$（文档）。就绪（函数（）{$（“#一些”）.tooltip（））；

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>