我正在尝试使用以下内容发现的.tooltip():jQuery-UI工具提示。我拥有的是一个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>

答案

尝试做这样的事情。为了使用工具提示,您将需要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,然后确保工具提示插件。

希望这对您有帮助。

来自: stackoverflow.com