¿Cómo puedo usar "div" en Twitter Popover con múltiples botones?

Question

Esta solución está bien para casos de un botón: Is it possible to use a div as content for Twitter's Popover

Pero en mi página tengo un montón de popovers (digamos 50-100).
Entonces necesito modificar esta solución.

solución de este wa @ de Javi:

$(document).ready(function(){ 
    $('.danger').popover({ 
    html : true, 
    content: function() { 
     return $('#popover_content_wrapper').html(); 
    } 
    }); 
}); 

Cada uno de mi botón tiene su propia identificación.

<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a> 
<div id="popover_div1" style="display: none"> 
    <div>This is your div content</div> 
</div> 

<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a> 
<div id="popover_div2" style="display: none"> 
    <div>This is your div content</div> 
</div> 

Entonces, ¿cómo puedo volver a escribir este fragmento de código de JavaScript para cubrir todos mis botones?

Answer 1

almacenar el ID del div que contiene el código HTML popover dentro del atributo rel del elemento

<a rel="popover_div2" ... >click</a> 

Y a continuación, obtener el rel del clic de anclaje dentro de su detector de clics (no estoy seguro cómo el método popover tiendas pero estoy seguro de que sí):

var myRel = $(this).attr(rel); 
return $(myRel).html(); 

Answer 2

Acaba de luchar con esto yo mismo. Necesitas poner la identificación en el elemento que desencadena el popover. Utilizar un atributo de datos personalizados como tal (llamado 'data-id'):

<a class='danger' data-id="popover_div1" data-placement='above' title="Popover Title" href='#'>Click</a> 

continuación, puede modificar su javascript ligeramente para agarrar el valor del atributo de datos Id de programación:

$(document).ready(function(){ 
    $('.danger').popover({ 
    html : true, 
    content: function() { 
     return $($(this).attr('data-id')).html(); 
    } 
    }); 
}); 

Answer 3

Para mí tiene que ser

data-id="#popover_div1" 

en el HTML para el botón (con un # para direccionar el id del div).

Answer 4

Si no quieren contaminar el elemento de origen con otro atributo data-*, aquí es una manera simple y genérica para utilizar el atributo data-content como selector de texto o CSS:

$('[data-toggle="popover"]').popover({ 
    html: true, 
    content: function() { 
     var content = $(this).data('content'); 
     try { content = $(content).html() } catch(e) {/* Ignore */} 
     return content; 
    } 
}); 

Ahora puede utilizar el atributo data-content con un valor de texto:

<a data-toggle="popover" data-title="Popover Title" data-content="Text from data-content attribute!" class="btn btn-large" href="#">Click to toggle popover</a> 

... o utilizar el atributo data-content con un valor de selector CSS:

<a data-toggle="popover" data-title="Popover Title" data-content="#countdown-popup" class="btn btn-large" href="#">Click to toggle popover</a> 

<div id="countdown-popup" class="hide">Text from <code>#countdown-popup</code> element!</div> 

Puede probar esta solución aquí: http://jsfiddle.net/almeidap/eX2qd/

... o aquí, si está usando Bootstrap 3.0: http://jsfiddle.net/almeidap/UvEQd/ (tenga en cuenta el nombre de atributo data-content-target!)

Answer 5

Puede hacerlo sin botón de añadir nuevos atributos como esto:

http://jsfiddle.net/isherwood/E5Ly5/

.popper-content { 
    display: none; 
} 

<button class="popper" data-toggle="popover">Pop me</button> 
<div class="popper-content">My first popover content goes here.</div> 

<button class="popper" data-toggle="popover">Pop me</button> 
<div class="popper-content">My second popover content goes here.</div> 

<button class="popper" data-toggle="popover">Pop me</button> 
<div class="popper-content">My third popover content goes here.</div> 

$('.popper').popover({ 
    container: 'body', 
    html: true, 
    content: function() { 
     return $(this).next('.pop-content').html(); 
    } 
});