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

Basée sur la documentation, 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à.

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.

Vous pouvez également essayer celui-ci,

==> Get cible/la position de la source dans la fenêtre d'affichage

==> Vérifiez que l'espace de fond est moins que votre infobulle hauteur

==> Si l'espace de fond est moins que votre info-bulle de la hauteur, puis il suffit de faire défiler la page jusqu'

placement: function(context, source){
//get target/source position in viewport
var bounds = $(source)[0].getBoundingClientRect();
winHeight = $(window).height();
//check wheather space from bottom is less that your tooltip height
var rBottom = winHeight - bounds.bottom;
//Consider 180 == your Tooltip height
//if space from bottom is less that your tooltip height, this will scrolls page up
//We are keeping tooltip position is fixed(at bottom)
if (rBottom < 180){
$('html, body').animate({ scrollTop: $(document).scrollTop()+180 }, 'slow');
}
return "bottom";
}

En plus de bchhun de la grande réponse, si vous voulez absoulte de positionnement, vous pouvez le faire

var options = {
placement: function (context, source) {
setTimeout(function () {
$(context).css('top',(source.getBoundingClientRect().top+ 500) + 'px')
},0)
return "top";
},
trigger: "click"
};
$(".infopoint").popover(options);

Vous pouvez également essayer celui-là, si u besoin dans presque tous les endroits dans la page.

U pouvez configurer de façon générale, puis il suffit de l'utiliser.

De cette façon, vous pouvez également utiliser l'élément HTML et tout ce à quoi tu veux 🙂

JS:

$(document).ready(function()
{
var options =
{
placement: function (context, source)
{
var position = $(source).position();
var content_width = 515;  //Can be found from a JS function for more dynamic output
var content_height = 110;  //Can be found from a JS function for more dynamic output
if (position.left > content_width)
{
return "left";
}
if (position.left < content_width)
{
return "right";
}
if (position.top < content_height)
{
return "bottom";
}
return "top";
}
, trigger: "hover"
, animation: "true"
, html:"true"
};
$('[data-toggle="popover"]').popover(options);
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<h3>Popover Example</h3>
<a id="try_ppover" href="#" data-toggle="popover" title="Popover HTML Header" data-content="<div class='jumbotron'>Some HTML content inside the popover</div>">Toggle popover</a>
</div>

Plus

---

Pour la mise plus d'options, u peut aller ici.

Même plus peut être trouvé ici.

Mise à jour

---

Si tu veux le popup après avoir cliquez sur, u pouvez modifier le JS option pour trigger: "click" comme celui-

        return ..;
}
......
, trigger: "click"
......
};

U peut aussi le personnaliser en HTML ading data-trigger="click" comme celui-

<a id="try_ppover" href="#" data-toggle="popover" data-trigger="click" title="Popover Header" data-content="<div class='jumbotron'>Some content inside the popover</div>">Toggle popover</a>

Je pense qu'il sera plus orienté de code et plus de ré-utilisable et plus utile à tous :).