Twitter Bootstrap, muestra todos los popovers en un div

Question

Intenté lograr lo siguiente usando Twitter Bootstrap 2.0 y su plugin popover, pero después de unas horas, todavía no puedo entenderlo.

Digamos que, en la esquina inferior izquierda de mi página, obtuve una imagen que muestra un pájaro. Esta ave debe "hablar" cada popover, por ejemplo, las de un formulario de registro, debe aparecer en la parte superior del ave. es posible?

Para una mejor comprensión, creé un sitio de prueba over here. Si pasa el cursor sobre los campos de registro, están los popovers. Quiero que aparezcan sobre el img de pájaro en la esquina inferior izquierda, pero no sé cómo lograr esto. Sería genial si pudieras ayudarme.

Answer 1

Método 1:

El controlador de vuelo estacionario jQuery toma un método "fuera" "en" y, en su muestra y sólo se le asigna el "en" método, para mostrar la ventana emergente. Esto está bien, pero en lugar de adjuntarlo a "esto", debes adjuntarlo a tu imagen de pájaro. Asegúrese de cambiar también el gatillo de la ventana emergente a manual. Luego, en el método "out" de hover, solo necesitas ocultar el popover.

$('#registerHere input').hover(function() 
{ 
    $('#birdie').popover({ 
      "trigger": 'manual', 
      "placement":'top', 
       }).popover('show'); 
}, 
function() 
{ 
    $('#birdie').popover('hide'); 
}); 

Método 2:

Alternativamente, mantener lo que tiene, pero el uso de la opción "selector" proporcionado, y darle su imagen ave como un parámetro, esto debe dar lugar a la popover de su mando , pero delegalo a su imagen de pájaro.

selector: si se proporciona un selector, información sobre herramientas objetos se delegará a los destinos especificados

$('#registerHere input').hover(function() 
{ 
    $('#birdie').popover({ 
      "selector": "#birdie", 
      "placement":'top', 
       }).popover('show'); 
}); 

EDIT: Añadido código de ejemplo. No tengo la oportunidad de probar esto, por lo que podría haber algún error de sintaxis o algo así, pero la idea general está ahí.