jquery - wp_enqueue_scripts - wp_enqueue_script();

.tooltip() no es una función

Question

Estoy tratando de usar el .tooltip () que encontré en lo siguiente: información sobre herramientas de Jquery-ui . Lo que tengo es una aplicación de rieles que tiene cierta información en una tabla. En celdas separadas. Actualmente, puede ver la información completa de una celda haciendo clic en ella, lo que abre un diálogo de jQuery que funciona bien. Lo que estoy tratando de agregar es que habrá dos opciones.

• 1) Haga clic en la celda que muestra el diálogo jQuery, que ya funciona

• 2) O coloque el cursor sobre una celda que muestre una vista general.

Image

Desde la imagen que tiene actualmente, puede hacer una reserva en la que puede hacer clic y se mostrará la información de la reserva. Sin embargo, estoy intentando extenderlo para que el usuario tenga la opción de hacer clic para ver la información o pasar el cursor sobre la celda para verla.

¿Cuál es la mejor manera de hacer esto? Tengo el siguiente código que funciona y muestra el diálogo. Intenté agregar:

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

antes de lo cual no funcionó, y probablemente entiendo que no funcionaría porque habría un conflicto entre los dos. Además de esto intenté usar simpletip y qtip pero parecía no tener suerte. Es lo que estoy tratando de hacer no factible.

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

Answer 1

Intenta hacer algo como esto. Para que la información sobre herramientas funcione, necesitará un conjunto de title para el 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();
});

También asegúrese de cargar primero jQuery y luego el complemento de información sobre herramientas.

Espero que esto te ayude.

Answer 2

Me deshice del error agregando el 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>