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

Answer 1

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>

Answer 2

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 3

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>