使用CSS更改工具提示位置，具体取决于屏幕大小

Question

我可以像这样用JS做到这一点：

$(function(){
    if($(document).width < 768){
        $("#myDiv").tooltip({'placement':'left'});
    }else{
        $("#myDiv").tooltip({'placement':'top'});
    }
});

但我更喜欢在屏幕尺寸改变时做出响应的解决方案。有没有办法做到这一点，还是我应该满足于上述？

Answer 1

使用window.onresize事件：

$(window).on('resize', function() {
    var pos = ($(window).width() < 768) ? 'left' : 'top';
    $("#myDiv").tooltip({'placement': pos});
}).trigger('resize');

Answer 2

请在此处查看我的回答：https://stackoverflow.com/a/27344574/187996

简而言之，我定义了响应式感知属性以放置工具提示（例如data-placement-xs="top" data-placement-md="left"），然后在每次显示工具提示时使用自定义JavaScript代码来识别展示位置。