Positionnement dynamique du popover Twitter-Bootstrap

Question

J'essaie de créer une fonction de déplacement dynamique pour les popups bootstrap, de sorte que si le contenu est trop grand pour être affiché sur l'écran avec un placement "en bas" sans défilement vertical, il montre le popover vers le haut avec le placement "top".

Pour cela, je créé une fonction:

function popoverPlacement(popoverHeight, element) { 
    var offset = element.offset().top; 
    var height = popoverHeight; 
    var docheight = $(document).height(); 

    if (offset + height >= docheight) { 
     return "top"; 
    } 
    else { 
     return "bottom" 
    } 
} 

Malheureusement, je dois préciser la popoverHeight en tant que valeur hardcoded, puisque le contenu est généré pour le popover et non ajouté au DOM, donc je ne peux pas obtenir la hauteur ce sera.

Voici comment il est utilisé:

$(this).popover({ 
      placement: function() { return popoverPlacement(270, this.$element); }, 
      title: "Status", 
      trigger: "click", 
      content: editStatusContent, 
      html: true, 
      delay: { 
       show: 1, 
       hide: 1 
      }, 
      animation: false 
     }); 

est-il un moyen dynamique pour atteindre cet objectif?

Merci

Answer 1

Vous pouvez mesurer votre popover en annexant avec le contenu du document en tant que nœud invisible, comme ceci:

var tpl = this.options.template; 
var $inner_el = $(this.options.content).clone(false); 
var $measure_el = $('.popover-content', tpl).append($inner_el) 
              .parents('.popover'); 
$measure_el.css({ 
    visibility: 'hidden', 
    position: 'absolute' 
}); 

$measure_el.appendTo('body'); 
actual_height = $measure_el.height(); 
actual_width = $measure_el.width(); 
$measure_el.remove(); 

Answer 2

J'ai trouvé que vous pouvez utiliser le positionnement absolu après avoir montré l'info-bulle:

$('#liveCallData').tooltip('show'); 
var tooltip = $('#liveCallData .tooltip'); 
width = tooltip.width(); 

pour le positionner:

tooltip.css({'position': 'absolute', top: y - 41, left: x - (width/2) - 1});