Modification de la position de Bootstrap popovers basé sur la liste des X de position par rapport au bord de la fenêtre?

Question

J'ai parcouru l'Internet beaucoup et alors que je trouve cette stackoverflow post perspicace Est-il possible de changer la position de Bootstrap popovers basé sur la largeur de l'écran?, il n'a toujours pas répondu à ma question, probablement à cause de ma difficulté à comprendre la position/offset.

Voici ce que je suis en train de faire. Je veux le Twitter Bootstap Liste position à DROITE, à moins que le hotspot liste sera positionné au-delà de la fenêtre d'affichage, puis je veux qu'il soit positionné à GAUCHE. Je suis en train de faire un iPad web app, qui a des points chauds, lorsque vous appuyez sur un hotspot, l'information s'affiche mais je ne veux pas qu'il apparaisse à l'extérieur de la fenêtre d'affichage lorsque le défilement horizontal est verrouillé.

Je pense que ça serait quelque chose comme ceci:

$('.infopoint').popover({
        trigger:'hover',
        animation: false,
        placement: wheretoplace 
    });
    function wheretoplace(){
        var myLeft = $(this).offset.left;

        if (myLeft<500) return 'left';
        return 'right';
    }

Pensées? Merci!

Answer 1

Je viens de remarquer que le placement de l'option peut être soit une chaîne de caractères ou une fonction retourne une chaîne qui fait le calcul à chaque fois que vous cliquez sur une fenêtre pop-over-mesure lien.

De ce fait, il est très facile de reproduire ce que vous avez fait sans le $.chaque fonction:

var options = {
    placement: function (context, source) {
        var position = $(source).position();

        if (position.left > 515) {
            return "left";
        }

        if (position.left < 515) {
            return "right";
        }

        if (position.top < 110){
            return "bottom";
        }

        return "top";
    }
    , trigger: "click"
};
$(".infopoint").popover(options);

Answer 2

Sur la base des documents que vous devriez être en mesure d'utiliser auto en combinaison avec le placement préféré par exemple, auto left

http://getbootstrap.com/javascript/#popovers: "Lorsque "auto" est spécifié, il sera dynamiquement réorienter la liste. Par exemple, si le placement est "auto" de gauche", l'info-bulle s'affichera à gauche lorsque cela est possible, sinon, il aura le droit d'affichage."

J'ai essayé de faire la même chose, et alors réalisé que cette fonctionnalité existait déjà.

Answer 3

J'ai donc trouvé une façon de le faire efficacement. Pour mon projet, je suis en train de construire un iPad site web, donc je savais exactement ce que le pixel X/Y de la valeur pour atteindre le bord de l'écran. Votre thisX et béthisy valeurs varient.

Depuis les popovers sont placés en inline style de toute façon, il me suffit de saisir le haut et à gauche de valeurs pour chaque lien pour décider quelle direction la liste devrait être. Ceci est fait en ajoutant html5 données - valeurs .liste() utilise lors de l'exécution.

if ($('.infopoint').length>0){
    $('.infopoint').each(function(){
        var thisX = $(this).css('left').replace('px','');
        var thisY = $(this).css('top').replace('px','');
        if (thisX > 515)
            $(this).attr('data-placement','left');
        if (thisX < 515)
            $(this).attr('data-placement','right');
        if (thisY > 480)
            $(this).attr('data-placement','top');
        if (thisY < 110)
            $(this).attr('data-placement','bottom');
    });
    $('.infopoint').popover({
        trigger:'hover',
        animation: false,
        html: true
    });
}

Les remarques/améliorations sont les bienvenus, mais de ce fait le travail, si vous êtes prêt à mettre les valeurs manuellement.

Answer 4

bchhun réponse m'a mis sur la bonne voie, mais je voulais vérifier pour l'espace disponible entre la source et la fenêtre d'affichage de pointe. Je voulais également respecter les données de placement attribut comme une préférence appropriée de la base s'il n'y avait pas assez d'espace. De cette façon, "droit" d'aller toujours droit à moins qu'il n'y avait pas assez d'espace pour la liste à afficher sur le côté droit, par exemple. C'était la façon dont j'ai géré ça. Il fonctionne pour moi, mais il se sent un peu lourd. Si quelqu'un a des idées pour un monde plus propre, plus concis solution, je serais intéressé de le voir.

var options = {
  placement: function (context, source) {
    var $win, $source, winWidth, popoverWidth, popoverHeight, offset, toRight, toLeft, placement, scrollTop;

    $win = $(window);
    $source = $(source);
    placement = $source.attr('data-placement');
    popoverWidth = 400;
    popoverHeight = 110;
    offset = $source.offset();

    // Check for horizontal positioning and try to use it.
    if (placement.match(/^right|left$/)) {
      winWidth = $win.width();
      toRight = winWidth - offset.left - source.offsetWidth;
      toLeft = offset.left;

      if (placement === 'left') {
        if (toLeft > popoverWidth) {
          return 'left';
        }
        else if (toRight > popoverWidth) {
          return 'right';
        }
      }
      else {
        if (toRight > popoverWidth) {
          return 'right';
        }
        else if (toLeft > popoverWidth) {
          return 'left';
        }
      }
    }

    // Handle vertical positioning.
    scrollTop = $win.scrollTop();
    if (placement === 'bottom') {
      if (($win.height() + scrollTop) - (offset.top + source.offsetHeight) > popoverHeight) {
        return 'bottom';
      }
      return 'top';
    }
    else {
      if (offset.top - scrollTop > popoverHeight) {
        return 'top';
      }
      return 'bottom';
    }
  },
  trigger: 'click'
};
$('.infopoint').popover(options);