更改bootstrap的位置2.1.1在手机上的工具提示

Question

我是一个总noob，只花了3小时googling &尝试，但无法弄清楚。我有这个

<span class="payshiptiptop tooltips"> 
<a href="#" id="payshiptiptop" rel="tooltip" data-placement="right" data-original-title="<div class='paymentmethods'></div>" data-html="true"> 
    GRATIS Versand 
</a> 
</span> 

但是，如果它是在移动，它应该放在上面。 由于2.1.1不支持自动正确，我尝试了几个代码从stackoverflow例如Is it possible to change the position of Bootstrap popovers based on screen width?和Changing the position of Bootstrap popovers based on the popover's X position in relation to window edge?以及许多其他人。

我想这是要走的路：

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

     if (position.left < 480) { 
      return "top"; 
     } 

     return "right"; 
    } 
}; 
$("#payshiptiptop").popover(options); 
</script> 

我真的很感激，如果你能帮助我&告诉我，我在我的PHP文件发布。谢谢！

Answer 1

如果你正在寻找一个基于CSS的解决方案，这里是为酥料饼的标记：

<div class="yourContainingClass"> 
    <div class="popover fade top in" role="tooltip"> 
    <div class="arrow"></div> 
    <h3 class="popover-title">Title</h3> 
    <div class="popover-content"></div> 
    </div> 
</div> 

提供你给它一个包木窗类，做什么CSS中媒体查询：

@media (max-width: 600px) { 
    .yourContainingClass .popover { 

    } 
    .yourContainingClass .popover-title { 

    } 
    .yourContainingClass .popover-content { 

    } 
}