QTip2 Elementos múltiples, misma información sobre herramientas

Question

Tengo una página en la que creo dinámicamente elementos que necesitan información sobre herramientas.

He intentado algunos enfoques diferentes y busqué en línea algunas respuestas en vano.

A partir de ahora, tengo esto:

var $links = $('a.link'); 
var len = $links.length; 
for(var i = 0; i < len; i++){ 
    var $ele = $($links[i]); 
    $ele.qtip({ 
     id: 'editLink', 
     overwrite: false, 
     content: { 
      text: $linkEditor, 
      title: { 
       text: 'Edit Link', 
       button: true 
      } 
     }, 
     position: { 
      my: 'top center', 
      at: 'bottom center', 
      viewport: $(window) 
     }, 
     show: { 
      event: 'mouseover', 
      solo: true 
     }, 
     hide: false, 
     style: {classes: 'ui-tooltip-shadow ui-tooltip-red'} 
    }); 
} 

Lo que estoy buscando es una manera de tener todos estos elementos utilizan exactamente la misma descripción. Quiero que todos utilicen exactamente el mismo contenido (en este caso, un solo formulario) y hagan referencia a la información sobre herramientas de la misma manera (mediante el elemento de información sobre herramientas con id 'ui-tooltip-editLink').

Con lo que tengo, actualmente crea la primera información sobre herramientas correctamente, pero si agrego un nuevo elemento y vuelvo a asignar información sobre herramientas, se crea una nueva información sobre herramientas con una identificación diferente para el nuevo elemento.

¿Alguien sabe alguna forma de lograr un elemento múltiple, el mismo enfoque de información sobre herramientas?

Answer 1

Para usar qtip en el elemento creado dinámicamente, debe incluir qtip durante la inicialización del elemento.

p. Ej.

$('<div style="top:0px; left:0px; position:absolute;">abc123</div>').appendTo("body").qtip({content: "test"}); 

Answer 2

Tristemente parece que tenemos que clonar el elemento Tooltip para cada uno de los elementos de desplazamiento/clic.

Craig menciona esto en la edición de GitHub: https://github.com/Craga89/qTip2/issues/173

Answer 3

He descubierto la manera de tener una información sobre herramientas div ser compartida por muchas imágenes sobre herramientas si alguien le resulta útil

$(".tooltipBearing").qtip({ 
          content: { 
           text: $("#tooltipDiv").html() 
          }   
         }); 

Si usted no puede poner el .html () allí, verá la información de herramienta compartida aparece una vez, y luego, cuando lo activas de otra imagen, ya no va a trabajar para la primera ...

la tooltipBearing es un conjunto de clases en algunas imágenes de la página.

tooltipDiv es el ID del div que contiene el contenido de su información sobre herramientas.

Answer 4

Esto es lo que hice. Adjunté mi información sobre herramientas en un elemento único. Y entonces todos mis otros elementos que necesitan la misma información sobre herramientas se acaba de activar la pantalla de información de herramientas del elemento único:

$('#unique-element').qtip({ 
    content: {text: 'My Tooltip'}, 
}); 

$('.other-elements').click(function(){ 
    $('#unique-element').qtip('show'); 
}); 

Sin embargo, la totalidad de su información sobre herramientas se mostrará en una posición fija. Esto no fue un problema en mi caso porque estaba usando la información sobre herramientas como modal. Deberá gestionar la posición de la información sobre herramientas mediante los métodos de cutom event.

Answer 5

Basado en the answer of user738048, mi solución de trabajo es la siguiente:

$('[data-tooltipid]').each(function() { 
    var ttid = $(this).data('tooltipid'); 
    $(this).qtip({ 
     content: { 
      text: $('#'+ttid).html(), 
     }, 
     position: { 
      my: 'top left', 
      at: 'bottom left', 
      target: $(this) 
     } 
    }).removeAttr('href').removeAttr('onclick'); 
}); 

En mi caso, el id del elemento HTML que contiene el texto está tomado de un atributo data-tooltipid; mis atributos href y onclick se eliminan ya que están obsoletos por la información sobre herramientas.