.tooltip()不是一个函数

Question

我试图使用我从以下发现的.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>

Answer 1

我通过添加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 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然后再加载工具提示插件.

希望这对你有所帮助.