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

我通过添加boostrap libs＆amp;来摆脱错误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然后再加载工具提示插件。

希望这会对你有所帮助。

Answer 3

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

Answer 4

不要忘记，tooltip() 并不一直存在于 jQuery UI。具体...

<块引用>

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

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

.tooltip（）不是一个函数

4 个答案: