.tooltip() 不是函数答案

【问题标题】：.tooltip() is not a function.tooltip() 不是函数
【发布时间】：2012-02-22 12:04:47
【问题描述】：

我正在尝试使用从以下位置找到的 .tooltip()：Jquery-ui tooltip。我所拥有的是一个在表格中包含一些信息的 Rails 应用程序。在单独的单元格中。目前，您可以通过单击打开一个工作正常的 jquery 对话框来查看单元格的完整信息。我想添加的是这样有两个选项。

1) 单击弹出 jquery 对话框的单元格 - 已经可以使用
2) 或将鼠标悬停在显示概览的单元格上。

Image

从当前图像中，您有一个预订，您可以点击它，它将显示预订信息。但是我正在尝试扩展它，以便用户可以选择单击以查看信息或将鼠标悬停在单元格上以查看信息。

最好的方法是什么？我有以下代码可以使用并打开对话框。我尝试添加：

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

before which 不起作用，我可能理解它不起作用，因为两者之间会有冲突。除此之外，我确实尝试使用 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>

【问题讨论】：

尝试将$("#some").tooltip();移动到$(document).ready(function() { $("#some").tooltip(); });

标签： jquery jquery-ui ruby-on-rails-3.1 tooltip

【解决方案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>

【讨论】：

【解决方案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，然后再加载工具提示插件。

希望对你有所帮助。

【讨论】：

我确实尝试了您的建议，现在我的代码如下所示：pastie.org/3431452 并且没有运气。奇怪的是我的 assets/javascript 文件夹中也有 jquery.tooltip.js
同时查看演示页面中包含的其他js。
检查this jsFiddle。在这里我添加了所有资源并且它正在工作:)
由于某种原因，我将示例放入其中，但它对我不起作用我在 jquery.ui.tooltip 中收到以下错误：$.widget is not a function _destroy: function() {，我只是以您的为例。我还包括了所有的js和css
我用过this jQuery插件。这同样有效。试试这个。希望这对你有用。它只需要基本的 jQuery.js。

【解决方案3】：

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

【讨论】：

【解决方案4】：

如果您使用的是 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>

【讨论】：

【解决方案5】：

别忘了，tooltip() 并非一直存在于 jQuery UI 中。具体...

添加的版本：1.9（来源：API.jQueryUI.com: Tooltip Widget。）

如果您没有 1.9 或更高版本的 jQuery UI，您将收到错误消息：tooltip() is not a function()。

【讨论】：