更改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 { 

    } 
}