Изменить размещение бутстрапа 2.1.1 всплывающая подсказка на мобильном телефоне

Question

Я полный нуб и просто трачу 3 часа на поиски в Интернете. & пытается, но не мог понять. У меня есть это

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

    } 
}