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

try moving `$("#some").tooltip();` to `$(document).ready(function() { $("#some").tooltip(); });` — Amar Palsapure, Feb 22 '12 at 15:00

score 20 · Answer 1 · answered Aug 06 '15 at 13:49

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>

score 11 · Accepted Answer · answered Feb 22 '12 at 12:31

11

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.

answered Feb 22 '12 at 12:31

Amar Palsapure

9,590
1
27
46

I did try what you suggested which now makes my code look like the following: http://pastie.org/3431452 and had no luck. Whats strange is that I also have jquery.tooltip.js in my assets/javascript folder – Deej Feb 22 '12 at 12:35
Also check other js included in the demo page. – Amar Palsapure Feb 22 '12 at 12:36
Check [this](http://jsfiddle.net/2SWmm/1/) jsFiddle. Here i have added all resources and it is working :) – Amar Palsapure Feb 22 '12 at 13:00
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 – Deej Feb 22 '12 at 13:17
I have used [this](http://www.koders.com/javascript/fid0FDCA3AC3AC9C24C2B312B1EA47F9C3E9CEB94B4.aspx) jQuery Plugin. This works similarly. Try this. Hope this works for you. It only needs basic jQuery.js. – Amar Palsapure Feb 22 '12 at 13:29
Should I include this along with the other files? – Deej Feb 22 '12 at 13:32

score 1 · Answer 3 · answered Aug 25 '21 at 09:58

1

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

answered Aug 25 '21 at 09:58

Siham Zeroual

51
3

score 0 · Answer 4 · edited Apr 08 '20 at 17:23

0

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

edited Apr 08 '20 at 17:23

D. Schreier

1,700
1
22
34

answered Apr 08 '20 at 13:50

teshnizi

61
1
6

score 0 · Answer 5 · answered Jan 21 '21 at 16:28

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

leymannx · Answer 6 · 2022-05-14T18:40:21.337

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/

.tooltip() is not a function

6 Answers6

Example: Enable tooltips everywhere

Linked