Twitter Bootstrap Popover:如何根据屏幕大小设置"放置"？

Question

我正在尝试使用http://twitter.github.io/bootstrap/javascript.html#popovers.在较大的屏幕上,我希望弹出框出现在右侧.在较小的屏幕上,我想我希望它出现在顶部或底部.有没有办法做到这一点？

Answer 1

我将响应式展示位置属性放在我的元素上,例如data-placement-xs="top" data-placement-md="left"并使用以下JavaScript来初始化所有页面中的工具提示:

$('[data-toggle="tooltip"]').tooltip({
    'placement': function(tt, trigger) {
        var $trigger = $(trigger);
        var windowWidth = $(window).width();

        var xs = $trigger.attr('data-placement-xs');
        var sm = $trigger.attr('data-placement-sm');
        var md = $trigger.attr('data-placement-md');
        var lg = $trigger.attr('data-placement-lg');
        var general = $trigger.attr('data-placement');

        return (windowWidth >= 1200 ? lg : undefined) ||
            (windowWidth >= 992 ? md : undefined) ||
            (windowWidth >= 768 ? sm : undefined) ||
            xs ||
            general ||
            "top";
    }
});