更改引导程序 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 {

  }
}