web-dev-qa-db-ja.com

.tooltip（）は関数ではありません

次から見つけた.tooltip（）を使用しようとしています： Jquery-ui tooltip 。私が持っているのは、テーブルにいくつかの情報があるRailsアプリです。別のセルにあります。私がそれに追加しようとしているのは、2つの選択肢があるようにするためです。

  • 1）jqueryダイアログを表示するセルをクリックします-すでに動作しています

  • 2）または、概要を示すセルにカーソルを合わせます。

画像

現在の画像から、クリックできる予約があり、予約情報が表示されます。ただし、ユーザーがクリックして情報を表示したり、セルにカーソルを合わせて情報を表示したりできるように拡張します。

これを行う最良の方法は何ですか？ダイアログを操作して表示する次のコードがあります。私は追加しようとしました：

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

以前は機能しませんでした。おそらく、2つの間に矛盾があるため、機能しないことを理解しています。これに加えて、私はsimpletipとqtipを使用してみましたが、運がないように見えました。私がやろうとしていることは実行不可能です。

<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>
jqueryjquery-uiruby-on-rails-3.1tooltip
20
David

このようなことをしてみてください。ツールチップを機能させるには、コントロールにtitleを設定する必要があります。

[〜＃〜] html [〜＃〜]

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

</td>

JavaScript

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

また、jQueryを最初にロードしてから、ツールチッププラグインをロードしてください。

これがお役に立てば幸いです。

7
Amar Palsapure

ブートストラップ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>
14
dtmiRRor