.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>

Salema

try moving $("#some").tooltip(); to $(document).ready(function() { $("#some").tooltip(); }); – Referendum

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.

Referendum

I did try what you suggested which now makes my code look like the following: pastie.org/3431452 and had no luck. Whats strange is that I also have jquery.tooltip.js in my assets/javascript folder – Salema

Also check other js included in the demo page. <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> <script src="../../jquery-1.7.1.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.tooltip.js"></script> – Referendum

Check this jsFiddle. Here i have added all resources and it is working :) – Referendum

For some reason I put the example in and it isn't working for me I am getting the following error in jquery.ui.tooltip: $.widget is not a function _destroy: function() { and I just used yours as an example. I also included all js and the css with it – Salema

I have used this jQuery Plugin. This works similarly. Try this. Hope this works for you. It only needs basic jQuery.js. – Referendum

Should I include this along with the other files? – Salema

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>

Wadmal

Answer 3

in my case i was uploading two versions of jquery: jquery 3.4 before the tooltip code, and jquery 3.5 after the tooltip code. i removed the second upload of jquery(3.5) and it worked

Grannia

Answer 4

In case you are using Bootstrap 4, use .min.js jquery file in place of .slim.min.js file:

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Peterus

Answer 5

Don't forget, tooltip() has not always existed in jQuery UI. Specifically...

version added: 1.9 (Source: API.jQueryUI.com: Tooltip Widget.)

If you don't have a version of jQuery UI at version 1.9 or higher, you'll get the error: tooltip() is not a function().

Chigetai

Answer 6

I think it took me an hour to recognise that the syntax has changed in Bootstrap 5. It's not tooltip() anymore, but Tooltip() instead. Also jQuery isn't required anymore.

Example: Enable tooltips everywhere

One way to initialize all tooltips on a page would be to select them by their data-bs-toggle attribute:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

https://getbootstrap.com/docs/5.0/components/tooltips/

Swinney