Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

jquery - .tooltip() is not a function

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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...