.tooltip() is not a function

Question

I am trying to use the .tooltip() that I found from the following: Jquery-ui tooltip. What I have is a rails app that has some information in a table. In separate cells. Currently you can view the full information of a cell by clicking it which opens up jquery dialog which works fine. What I am trying to add to it is so that there will be two options.

• 1) Click the cell which brings up jquery dialog - which works already

• 2) Or hover a cell which shows an overview.

Image

From the image currently you have a booking that you can click on and it will show the booking information. However I am trying to extend it so that the user has the option of clicking to view the information or hovering over the cell to view the information.

What is the best way to do this? I have the following code which works with and brings up the dialog. I tried adding:

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

before which didn't work, and I probably understand that it wouldn't work because there would be a conflict between the two. In addition to this I did try using simpletip and qtip but seemed to not have no luck. Is what I am trying to do not feasible.

<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

Try doing something like this. For tooltip to work, you will require title set for the control.

HTML

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

</td>

JavaScript

$(document).ready(function(){
   $("#bookingTd").tooltip();
});

Also make sure you load jQuery first and then the tooltip plugin.

Hope this helps you.

Answer 2

I got rid of the error by adding the 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>