2012-11-07 10 views
8

Desidero che un popover sia contenuto in un div pieghevole: http://jsfiddle.net/nathan9/qgyS7/. Tuttavia, il popover sembra essere limitato all'estensione del div. C'è un modo per prevenire il clipping?Popup bootstrap ritagliato fino all'entità di contenere div

<a href="#toggle" data-toggle="collapse" data-target="#toggle" onClick="return false;">Toggle collapse</a> 
<div id="toggle" class="collapse" style="background-color: yellow"> 
    Content of collapsible div. Click for popover: 
    <i class="icon-info-sign" id="info"></i> 
</div> 

...

<script> 
    $('#info').popover({ html: true, placement: 'left', title: 'Popover', content: "<ul><li>The</li><li>popover</li><li>is</li><li>clipped.</li></ul>" }); 
</script> 
+0

Controlla questa risposta: http://stackoverflow.com/a/14800781/1478467 ([demo] (http://jsfiddle.net/Sherbrow/qgyS7/8/)) – Sherbrow

risposta

2

aggiungendo .collapse.in {overflow:visible} sembra fare il trucco

http://jsfiddle.net/ZArX7/

EDIT: Sopra risposta lavorato solo in cromo

Ecco un pezzo di jquery che ritarda l'aggiunta della classe.

 $('#toggle_link').click(function() { 
    if($('#toggle').hasClass('in')){ 
     $('#toggle').removeClass('visible'); 
    }else{ 
     setTimeout(function() { 
      $('#toggle').addClass('visible'); 
     }, 1000); 
    } 
}); 

Questa soluzione funziona

http://jsfiddle.net/fnP7y/

+0

Sfortunatamente, questo ha anche l'effetto di rovinando l'effetto fisarmonica - cioè, il contenuto del div crollato viene immediatamente mostrato invece di essere rivelato gradualmente man mano che il div si espande. C'è un altro modo? – nathan9

+0

Ho giocato con questo per un po 'di tempo, e la risposta di Mike sembra essere la migliore scommessa per ora. Abbiamo un problema aperto su github per il popover e tooltip ora per essere posizionati su determinati elementi, e ho aggiunto il tuo violino alla lista di bug con i tooltip e popover - [git hub issue] (https://github.com/ Twitter/bootstrap/temi/5687) – Yohn

8

Utilizzando timer è sempre un affare rischioso. Ho usato una variante di Mike Lucid che ascolta l'evento collassabile, mostrato e nascosto.

Here is a working fiddle

Il codice è il seguente:

$(document).ready(function(){ 
    $('#toggle') 
    .on('shown', function(evnt) { 
     $(evnt.target).addClass('visible'); 
    }) 
    .on('hide', function(evnt) { 
     $(evnt.target).removeClass('visible'); 
    }) 
    ; 
}); 

Se si desidera che il pieghevole per essere visibile sul carico, non dimenticate di aggiungere classi in e visibile al pieghevole div.

Modifica

A partire da Bootstrap 2.3, i suggerimenti e popover hanno una nuova opzione container. Se si imposta il contenitore su "body", i tooltip e i popover non verranno ritagliati. Here is a working fiddle.

Spero che questo aiuti.

Problemi correlati